CSS3制作炫酷环形星星发光动画

来源：互联网发布：心理软件编辑：程序博客网时间：2024/06/03 03:06

纯CSS3做炫酷环形星星发光动画，在简单没思路你也做不出来

↑效果图

源码：

<!DOCTYPE html><html><head>    <!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->    <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"><!--当前页面的三要素--><title>css3动画</title>        <metaname="author"content="P+老师" /><!--css,js--><styletype="text/css">        *{margin:0;padding:0;}        html,body{            height:100%;        }        body{            background:radial-gradient(ellipse at center,#34679a0%,#21416350%,#0d1926100%);/*径向渐变 椭圆*/        }        body> div{            width:200px;/*宽度 px像素 cm*/            height:200px;/*高度*/            border:1px#fffsolid;/*边框 宽度 风格 颜色*/            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:nucleus2sinfinitelinear;        }        body> div > div{            width:200px;            height:200px;            position:relative;            transform-style:preserve-3d;            animation:trail1sinfinitelinear;/*自定义动画 动画名称 时间 播放次数 速度*/        }        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:0012px#fff;/*阴影 x y 模糊度 颜色*/            animation:particle1sinfinitelinear;        }        /*自定义动画执行*/        @keyframestrail{            from{                transform:rotateZ(0deg);            }            to{                transform:rotateZ(360deg);            }        }        @keyframesparticle{            from{                transform:rotateX(90deg)rotateY(0deg);            }            to{                transform:rotateX(90deg)rotateY(-360deg);            }        }        @keyframesnucleus{            0%{                box-shadow:000transparent;            }            50%{                box-shadow:0025px#fff;            }            100%{                box-shadow:000transparent;            }        }        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></head><body>    <div><div></div></div>    <div><div></div></div>    <div><div></div></div>    <div><div></div></div></body></html>

web前端学习群：575308719，分享源码、视频、企业级案例、最新知识点，欢迎初学者和在进阶中的小伙伴。

关注公众号→‘学习web前端’跟大佬一起学前端！

阅读全文

0 0