css样式css按照步骤实现1.先写父容器样式，给整个页面加一个背景色顺便说一句，为了便于预览body{background:rgba(73,74,95,1);}.container{width:170px;高度：170px；位置：相对；margin:250pxauto;}2.写乌云的样式，别忘了还有乌云上下移动的动画效果。stormy{width:50px;高度：50px；位置：绝对；左：80px；顶部：70px；左边距：-60px；背景：#222；边界半径：50%；框阴影：#22264px-15px0-5px，#22225px-25px，#22230px10px，#22260px15px0-10px，#22285px5px0-5px；动画：stormy5sease-in-outinfinite;}@keyframesstormy{50%{transform:translateY(-20px);}}3.阴影样式也是动画的。暴风雨::之后{内容：'';宽度：120px；高度：15px；位置：绝对；左：5px；底部：-60px；背景：#000；边界半径：50%；不透明度：0.2；变换：比例（0.7）；动画：stormy_shadow5sease-in-outinfinite;}@keyframesstormy_shadow{50%{变换：translateY(20px)scale(1);不透明度：0.05；}}4、闪电风格.stormy::before{display:block;内容：'';宽度：0；高度：0；位置：绝对；左：57px；顶部：70px；左边框：0px实心透明；border-right:7pxsolidtransparent;border-top：43px纯黄色；-7px-32px;变换：旋转（14度）；变换原点：50%-60px；动画：stormy_thunder2ssteps(1,end)infinite;}@keyframesstormy_thunder{0%{transform:rotate(20deg);1;}5%{变换：旋转（-34deg）；不透明度：1；}10%{变换：旋转（0度）；不透明度：1；}15%{变换：旋转（-34deg）；不透明度：0；}}好了，搞定了。按照步骤操作，你也可以在你的页面上实现炫酷的雷电天气图标哦~