jQuery特效实例_幽灵按钮3|学习笔记

简介: 快速学习 jQuery 特效实例_幽灵按钮3

开发者学堂课程【jQuery 开发教程:jQuery 特效实例_幽灵按钮3】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/362/detail/4314


jQuery 特效实例_幽灵按钮3



一、按钮元素的动态效果

1.将箭头制作动态效果

图片86.png

点亮效果

.box .link .button{
transition: 0.4s ease;  //引入动画给0.4秒的执行时间,过渡类型为ease
-webkit-transition:0.4s ease;
//添加 webkit 的内核支持谷歌浏览器
position: relative; //设置按钮为相对定位
}
.box .link . button: hover{ //鼠标略过向效果hover右滑动效果是给button按钮中的背景图片添加的
background-position: 140px center ; //图片设置成140px,将图片向右移动一点
border-color: rgba(255,255,255,1); //边框点亮效果

箭头动画和边框点亮效果结果:

图片111.png

仔细观察,会发现他会有一个点亮的效果。

2.四条线的效果:

首先找到线,第一层是box,第二层应该用link,四条线在每个按钮中都是一样的,第三层是button,然后是span里面的line。

鼠标略过从左到右出现,从右到左,上到下,下到上

.box .link . button . line{ //设置共同样式
position: absolute;  //设置成绝对定位,起始位置固定
display: block; //将a标签设置成块级元素
background: none ;
transition: 0.4s ease ;  //引入动画
-webkit-transition:0.4s ease;  //添加内核
}
//然后设置当鼠标略过这几条线的变化,首先设置最上面的线
.box .link . button: hover .line-top{
left:-100%; //让线条完全的从最左侧出来
top:-2px;
width:0; //宽设置为0
height:2px; //高设置为2px
}
.box .link . button: hover .line-top{//给button按钮添加hover鼠标略过属性,略过的上面的线line-top变化
width: 180px; //设置宽度
background-color: #fff; //设置背景颜色为白色
position: absolute; //为绝对定位
left: -2pxs ; //线条从左到右出现
top: -2px;
}

此时边框上面的白线设置完毕,从左到右出现,效果图:

图片112.png

.box .link . button . line-left{ //观察得左边这条线有宽度,高度默认为0,
width: 2px;
height: 0;
bottom: -100%; //初始位置
left: -2px; //向左偏2px
}
.box .link . button: hover . line-left{ //给button添加hover属性,当鼠标略过,高度应该与按钮高度相同
height: 50px; //高度设置为50px
background: #fff;  //背景颜色设置为白色
left: -2px; //因为是从上到下显示,所以left,bottom值都为-2px
bottom: - 2px;
}

刷新看效果,此时边框左边的白线设置完毕,从下到上出现,效果图:

图片113.png

.box .link . button .line-right{ //右边这条线与左边同理,只是由上到下出现
width: 2px; //宽度默认2px
height:0; //高度为0
top: - 100%; //因为是从上到下显示的,所以设置成%100,让线从上到下滑动
right:- 2px;
}
.box .link .button:hover .line-right{
height: 50px; //高度为50px
background-color: #ffffff; //背景颜色为白色
top: -2px;
right: - 2px;
}

此时边框右边的白线设置完毕,从上到下出现,效果图:

图片114.png

.box .link .button . line- bottom{ //设置最后一条线
right: - 100% ; //因为是从右到左滑入,所以right值默认为-%100
width:0; //宽度为0
height: 2px; 高度为2px
bottom: -2px; 
}
.box .link . button: hover . line-bottom{ //设置hover状态,鼠标略过就滑入进来
right: - 2px; 
bottom: - 2px;
background-color: #ffffff; //背景颜色为白色
width:180px; //宽度变为180px
}

此时边框底部的白线设置完毕,从右到左出现,效果图:

图片115.png

运行结果:三个按钮都已实现。

相关文章
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
88 0
|
2月前
|
JavaScript 前端开发 容器
使用 jQuery 中的 this 实例
使用 jQuery 中的 this 实例
12 1
|
3月前
|
JavaScript 前端开发
jQuery 实例
jQuery 实例
18 3
|
4月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
60 13
|
4月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
26 1
|
4月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
21 1
|
4月前
|
JavaScript 前端开发 容器
使用 jQuery 中的 this 实例
使用 jQuery 中的 this 实例
39 0
|
7月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
41 0
|
7月前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?