前几天浏览网页是时候，发现一个特效，感觉很不错，博主仿照它的样子写了一下，下面直接见代码吧。
在页面中添加一个提交按钮
<body>
<div class="submit_style"><input type="submit" class="submit" value="登录"/>
</div>
</body>下面进行样式设计。大小高宽就不说了，直奔重点
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;动画创建好了以后，再进行呼吸效果的实现
@-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
这样就实现了，是不是很简单？来看一下具体效果如何吧
抱歉，有水印，将就一下吧，哈哈哈！
