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

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

魔方编程

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

阅读量468

点赞数

文章标签： css 前端 web前端前端教程前端开发

本文链接：https://blog.csdn.net/wewfdf/article/details/101122251

版权

本文介绍了一种使用CSS制作电闪雷鸣天气图标的详细方法。通过设置box-shadow创建云朵，利用before和after伪元素塑造闪电和投影效果。文章提供了DOM结构和CSS样式的实现步骤，并鼓励对前端技术感兴趣的读者实践操作。

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

效果图如下

用两个嵌套的div容器就可以了，父容器来控制图标显示的位置，子容器用来写乌云的样式。而阴影和闪电的样式都用伪元素就可以了，这些都是在css中定义的。

<div class="container">
    <div class="stormy"></div>
</div>

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;

关注