在页面中添加一个提交按钮
<body>
<div class="submit_style">
<input type="submit" class="submit" value="登录"/>
</div>
</body>
下面进行样式设计。大小高宽就不说了,直奔重点
border-radius:6px;
cursor: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(linear,left top,left bottom,from(#6cc3fe),to(#21a1d0));
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-name:submit;
-webkit-animation-duration:2500ms;
-webkit-animation-iteration-count:infinite;
-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);
}
}
当你鼠标放上:hover去要实现动态效果,可以添加下面一句margin-top:42px
这样就实现了,是不是很简单?来看一下具体效果如何吧
![这里写图片描述](https://img-blog.csdn.net/20170628173334668?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQWpheF9tdA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
抱歉,有水印,将就一下吧,哈哈哈!