div{
/*元素宽度*/
width:500px;
/*元素高度*/
height:500px;
/*背景颜色*/
background-color: #2b92d4;
/*外边距,左右边距自动,实现居中*/
margin:200px auto;
/*圆*/
border-radius:50%;
/*阴影*/
box-shadow:0 1px 2px rgba(0,0,0,.3);
/*动画*/
/*myAnim为动画名称*/
/*1s 动画时间*/
/*ease-in-out 先加速后减速*/
/*alternate 动画播放在第偶数次向前播放,第奇数次向反方向播放*/
animation:myAnim 1s ease-in-out infinite alternate;
}
@keyframes myAnim{
0%{
/*元素透明度*/
opacity: 0.2;
/*元素阴影*/
box-shadow: 0 1px 2px rgba(255,255,255,0.1);
}
50%{
opacity: 0.5;
box-shadow:0 1px 2px rgba(18,190,84,0.76);
}
100%{
opacity:1;
box-shadow:0 1px 30px rgba(59,255,255,1);
}
}