怎么用css制作电闪雷鸣的天气图标-创新互联

本篇内容介绍了“怎么用css制作电闪雷鸣的天气图标”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

站在用户的角度思考问题，与客户深入沟通，找到积石山保安族东乡族网站设计与积石山保安族东乡族网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计、成都做网站、企业官网、英文网站、手机端网站、网站推广、域名与空间、网站空间、企业邮箱。业务覆盖积石山保安族东乡族地区。

效果

效果图如下

怎么用css制作电闪雷鸣的天气图标

实现思路

使用box-shadow属性写几个圆，将这些圆错落的组合在一起，形成云朵图案
after伪元素写下面的投影样式
before伪元素写黄色闪电的样式

dom结构

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

css样式

css按照步骤来实现

1、先写父容器样式，顺便给整个页面加个背景色，方便预览

body{
    background: rgba(73,74,95,1);
}

.container{
    width: 170px;
    height: 170px;
    position: relative;
    margin: 250px auto;
}
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

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;
    }
}

OK，搞定。按着步骤来，你也可以在你的页面上实现酷炫的电闪雷鸣天气图标咯~

“怎么用css制作电闪雷鸣的天气图标”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联-成都网站建设公司网站，小编将为大家输出更多高质量的实用文章！

文章标题：怎么用css制作电闪雷鸣的天气图标-创新互联
网站链接：http://mswzjz.cn/article/dpgpip.html

网站建设知识

怎么用css制作电闪雷鸣的天气图标-创新互联

效果

实现思路

dom结构

css样式

其他资讯