web前端炫酷特效-CSS3制作环形星星发光动画

标签：前端   源码   特效   css3   

html源码：

    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>

css源码：

   <style type="text/css">
        *{margin:0;padding:0;}
        html,body{
            height:100%;
        }
        body{
            background:radial-gradient(ellipse at center,#34679a 0%, #214163 50%, #0d1926 100%);/*径向渐变   椭圆*/
        }
        body > div{
            width:200px;/*宽度 px像素  cm*/
            height:200px;/*高度*/
            border:1px #fff solid;/*边框 宽度 风格 颜色*/
            border-radius:50%;/*圆角*/
            position:absolute;
            top:15%;
            left:50%;
            margin-left:-101px;
            transform:rotateX(80deg) rotateY(20deg);
            transform-style:preserve-3d;
        }
        body > div:nth-of-type(2){
            transform:rotateX(-80deg) rotateY(20deg);
        }
        body > div:nth-of-type(3){
            transform:rotateX(-70deg) rotateY(60deg);
        }
        body > div:nth-of-type(4){
            transform:rotateX(70deg) rotateY(60deg);
        }
        body > div:first-of-type:after{
            width:40px;
            height:40px;
            content:"";
            background:#fff;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-20px;
            margin-left:-20px;
            transform:rotateX(80deg);
            border-radius:50%;
            animation:nucleus 2s infinite linear;
        }
        body > div > div{
            width:200px;
            height:200px;
            position:relative;
            transform-style:preserve-3d;
            animation:trail 1s infinite linear; /*自定义动画  动画名称 时间 播放次数 速度*/
        }
        body > div > div:after{
            content:"";
            width:5px;
            height:5px;
            background:#fff;
            position:absolute;
            top:-5px;
            left:50%;
            margin-left:-5px;
            border-radius:50%;
            box-shadow:0 0 12px #fff;/*阴影 x y 模糊度 颜色*/
            animation:particle 1s infinite linear;
        }
        /*自定义动画执行*/
        @keyframes trail{
            from{
                transform:rotateZ(0deg);
            }
            to{
                transform:rotateZ(360deg);
            }
        }
        @keyframes particle{
            from{
                transform:rotateX(90deg) rotateY(0deg);
            }
            to{
                transform:rotateX(90deg) rotateY(-360deg);
            }
        }
        @keyframes nucleus{
            0%{
                box-shadow:0 0 0 transparent;
            }
            50%{
                box-shadow:0 0 25px #fff;
            }
            100%{
                box-shadow:0 0 0 transparent;
            }
        }
        body > div:nth-of-type(2) > div,
        body > div:nth-of-type(2) > div:after{
            animation-delay:-0.5s;
        }
        body > div:nth-of-type(3) > div,
        body > div:nth-of-type(3) > div:after{
            animation-delay:-1s;
        }
        body > div:nth-of-type(4) > div,
        body > div:nth-of-type(4) > div:after{
            animation-delay:-1.5s;
        }

   </style>

web前端炫酷特效-CSS3制作环形星星发光动画

标签：前端   源码   特效   css3   

原文地址：http://blog.51cto.com/13457136/2088955