screenshots.gif

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);    
    }

}