文单阅读

<!DOCTYPE HTML>
        <html>
        <head>
            <title>纯CSS3实现闪闪发光的动画</title>
            <style>
                body{
                    background-color:#000000;
                }
                /*0%开始，100%结束*/
                @keyframes scale{
                    0%{transform:scale(1)}
                    50%,75%{transform:scale(3)}
                    78%,100%{opacity:0}
                }
                .item1 {
                position: absolute;
                width: 14px;
                height: 14px;
                background-color: #FFFF00;
                border-radius: 50%;
                margin: 100px  100px 50px 200px;
                }
                .item1:before {
                content: '';
                display:block;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                opacity: .7;
                background-color: #FFFF00;
                animation: scale 2s infinite cubic-bezier(0,0,.49,1.02);
                animation-delay: 200ms;
                }
                .item2 {
                position: absolute;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background-color: #5BFF4A;
                margin: 100px  100px 50px 300px;
                }
                
                .item2:before {
                content: '';
                display:block;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background-color: #5BFF4A;
                opacity: .7;
                animation: scale 2s infinite cubic-bezier(0,0,.49,1.02);
                animation-delay: 100ms;
                }
                .item3 {
                position: absolute;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background-color: #FF66CC;
                margin: 180px  100px 50px 200px;
                }
                
                .item3:before {
                content: '';
                display:block;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background-color: #FF66CC;
                opacity: .7;
                animation: scale 2s infinite cubic-bezier(0,0,.49,1.02);
                animation-delay: 400ms;
                }
                .item4 {
                position: absolute;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background-color: #FF0033;
                margin: 180px  100px 50px 300px;
                }
                
                .item4:before {
                content: '';
                display:block;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background-color: #FF0033;
                opacity: .7;
                animation: scale 2s infinite cubic-bezier(0,0,.49,1.02);
                animation-delay: 300ms;
                }
            </style>
        </head>
        <body>
            <div class="item1"></div>
            <div class="item2"></div>
            <div class="item3"></div>
            <div class="item4"></div>
    </body>
    </html>
纯CSS实现散光发光动画
