呼吸灯按钮
.btn{
position:relative ;
margin-top: 42%;
left: 45%;
width: 200px;
height: 45px;
bottom: 1cm;
//位置信息,因人而异,可以不管
box-shadow:0 1px 2px rgba(105, 192, 214, 0.705);
//box-shadow阴影效果,也可以营造出发光效果
background-image:-webkit-gradient(linear,left top,left bottom,from(#6cc3fe),to(#21a1d0));
//上下垂直渐变.from to决定渐变颜色
/*规定动画变换速度: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:.5; /*元素不透明级别*/
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 rgb(245, 244, 173);
}
}