效果

效果图如下

实现思路

  1. 使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案
  2. after伪元素写下面的投影样式
  3. 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:;
height:;
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:;
}
5%{
transform: rotate(-34deg);
opacity:;
}
10%{
transform: rotate(0deg);
opacity:;
}
15%{
transform: rotate(-34deg);
opacity:;
}
}

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

纯css制作电闪雷鸣的天气图标的更多相关文章

  1. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 纯CSS制作三角(转)

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  3. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  4. 如何使用纯CSS制作特效导航条?

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  5. No.5 - 纯 CSS 制作绕中轴旋转的立方体

    body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...

  6. 纯CSS制作空心三角形和实心三角形及其实现原理

    纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

  7. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  8. 纯CSS制作加<div>制作动画版哆啦A梦

    纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...

  9. 纯CSS制作冒泡提示框

    来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...

随机推荐

  1. Go中的fmt几种输出的区别和格式化方式

    在日常使用fmt包的过程中,各种眼花缭乱的print是否让你莫名的不知所措呢,更让你茫然的是各种格式化的占位符..简直就是噩梦.今天就让我们来征服格式化输出,做一个会输出的Goer. fmt.Prin ...

  2. HTML/CSS:display:flex 布局教程

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

  3. 【Vue的路由,SPA概念】

    前言 本章是为了以后实现前端页面的搭建而写的, 重点在于如何实现 单页Web应用 因为相对于以前的传统多页面web,有很大的缺陷. 那么就必须了解一下Vue的路由设置. SPA的概念 总的而言,我们知 ...

  4. c#引用本地dll发布后运行exe错误

    在config 文件夹 configuration 配置节点下面 添加 <runtime> <gcConcurrent enabled="true" /> ...

  5. vue+el-menu实现路由刷新和导航栏菜单状态保持(局部刷新页面)

    一.菜单项激活状态保持 有时,我们在项目中会有这样一个需求,即实现 一个侧导航栏,点击不同的菜单项,右边内容会跟着变化,而页面手动刷新后想要使菜单激活状态保持,那么这个功能该如何实现呢? 现在给出以下 ...

  6. Linux:oracle11.2.0dbca静默建库

    1.关闭防火墙 systemctl stop firewalld.service #停止firewall systemctl disable firewalld.service #禁止firewall ...

  7. c语言实现基本的数据结构(六) 串

    #include <stdio.h> #include <tchar.h> #include <stdlib.h> // TODO: 在此处引用程序需要的其他头文件 ...

  8. 使用 php 内部web服务器

    使用 php 内部web服务器如网站目录 d:\web\index.php1.打开命令窗口,输入下列3条命令cd d:cd d:\web\index.phpphp -S localhost:80802 ...

  9. 【JS档案揭秘】第二集 Event loop与执行栈

    我时常在思考关于JS的很多知识在工作中有什么用?是否只能存在于面试这种理论性的东西中,对于我们的业务和工作,它们又能扮演怎样的角色.以后在JS档案揭秘的每一期里,都会加入我对于业务的思考,让这些知识不 ...

  10. Gitment评论插件的使用

    前言 继上一篇的 GitPages部署自己的网站 现在开始添加博客的评论插件Gitment.这里的话我是使用hexo添加gitment插件,如果不是使用hexo,请到官网指定这里. 开始 第一步 注册 ...