您的位置：首页 > 其它

按钮添加呼吸灯效果

2017-08-02 18:25 1561 查看

在页面中添加一个提交按钮

<body>
<div class="submit_style">
<input type="submit" class="submit" value="登录"/>
</div>
</body>

1
2
3
4
5
1
2
3
4
5

下面进行样式设计。大小高宽就不说了，直奔重点

border-radius:6px;  /*圆角*/
cursor:pointer;     /*光标形状，pointer为一只手的形状*/
margin:40px auto;   /*边距*/
border:1px solid #2b92d4;       /*按钮边框设置*/
color:#fff;        /*文字颜色*/
font-size:20px;    /*文字大小*/
text-align:center;  /*居中显示*/
box-shadow:0 1px 2px rgba(0,0,0,.3);  /*边框阴影设置*/
overflow:hidden;

/*线性渐变语法：
background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),…] );
type:line   -->表示渐变为线性
x1,x2,y1,y2     -->渐变坐标，x1=x2垂直变换,y1=y2左右变换
*/
background-image:-webkit-gradient(linear,left top,left bottom,from(#6cc3fe),to(#21a1d0));       /*上下垂直渐变*/

/*规定动画变换速度：ease-in-out -->动画以低速开始和结束 */
-webkit-animation-timing-function:ease-in-out;

/*为 @keyframes 动画规定一个名称*/
-webkit-animation-name:submit;

/*完成一个动画所需时间*/
-webkit-animation-duration:2500ms;

/*规定动画播放次数：infinite为无限次*/
-webkit-animation-iteration-count:infinite;

/*规定动画播放方式：alternate为轮流反向播放*/
-webkit-animation-direction:alternate;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

动画创建好了以后，再进行呼吸效果的实现

@-webkit-keyframes submit {
0% {
opacity:.4;     /*元素不透明级别*/
box-shadow:0 1px 2px rgba(255,255,255,0.1);
}
100% {
opacity:1;
border:1px solid rgba(59,235,235,2);
box-shadow:0 1px 30px rgba(59,255,255,2);
}
}

1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11

当你鼠标放上：hover去要实现动态效果，可以添加下面一句margin-top:42px

这样就实现了，是不是很简单？来看一下具体效果如何吧

抱歉，有水印，将就一下吧，哈哈哈！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航