效果
效果图如下
实现思路
使用box-shadow属性写几个圆，将这些圆错落的组合在一起，形成云朵图案after伪元素写下面的投影样式before伪元素写黄色闪电的样式dom结构
用两个嵌套的div容器就可以了，父容器来控制图标显示的位置，子容器用来写乌云的样式。而阴影和闪电的样式都用伪元素就可以了，这些都是在css中定义的。
<div class="container"><div class="stormy"></div></div>
css样式
css按照步骤来实现
1、先写父容器样式，顺便给整个页面加个背景色，方便预览
body{background: rgba(73,74,95,1);}.container{width: 170px;height: 170px;position: relative;margin: 250px auto;}
2、写乌云的样式，别忘了乌云有一个上下移动的动画效果
.stormy{width: 50px;height: 50px;position: absolute;left: 80px;top: 70px;margin-left: -60px;background: #222;border-radius: 50%;box-shadow: #222 64px -15px 0 -5px,#222 25px -25px,#222 30px 10px,#222 60px 15px 0 -10px,#222 85px 5px 0 -5px;animation: stormy 5s ease-in-out infinite;}@keyframes stormy{50%{transform: translateY(-20px);}}
3、阴影样式，同样是有动画的
.stormy::after{content: '';width: 120px;height: 15px;position: absolute;left: 5px;bottom: -60px;background: #000;border-radius: 50%;opacity: 0.2;transform: scale(0.7);animation: stormy_shadow 5s ease-in-out infinite;}@keyframes stormy_shadow{50%{transform: translateY(20px) scale(1);opacity: 0.05;}}
4、闪电样式
.stormy::before{display: block;content: '';width: 0;height: 0;position: absolute;left: 57px;top: 70px;border-left: 0px solid transparent;border-right: 7px solid transparent;border-top: 43px solid yellow;box-shadow: yellow -7px -32px;transform: rotate(14deg);transform-origin: 50% -60px;animation: stormy_thunder 2s steps(1, end) infinite;}@keyframes stormy_thunder{0%{transform: rotate(20deg);opacity: 1;}5%{transform: rotate(-34deg);opacity: 1;}10%{transform: rotate(0deg);opacity: 1;}15%{transform: rotate(-34deg);opacity: 0;}}
对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，工作第六个年头了，与大家分享一些学习方法，实战开发需要注意的细节。767-273-102 秋裙。从零基础开始怎么样学好前端。看看前辈们是如何在编程的世界里傲然前行！不停更新最新的教程和学习方法（web前端系统学习路线，详细的前端项目实战教学视频），有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入。我们会一起结伴同行前端前端前端
OK，搞定。按着步骤来，你也可以在你的页面上实现酷炫的电闪雷鸣天气图标咯~
