web前端入门到实战：纯CSS制作电闪雷鸣的天气图标

最新推荐文章于 2024-07-27 18:30:00 发布

编程世界-云

最新推荐文章于 2024-07-27 18:30:00 发布

阅读量158

点赞数

文章标签： css 前端 web前端前端开发网页制作

本文链接：https://blog.csdn.net/weixin_45761317/article/details/103284265

版权

本文介绍如何使用CSS从入门到实战，创建一个具有动态效果的电闪雷鸣天气图标。通过box-shadow属性组合圆形成云朵，利用before和after伪元素制作闪电，借助div容器和动画效果，实现视觉上的冲击力。

摘要由CSDN通过智能技术生成

效果

效果图如下

实现思路

使用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;
}
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

2、写乌云的样式，别忘了乌云有一个上下移动的动