效果

效果图如下

实现思路

  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制作加&lt;div&gt;制作动画版哆啦A梦

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

  9. 纯CSS制作冒泡提示框

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

随机推荐

  1. ubuntu下配置SVN服务器

    自己买的阿里云服务器.可是我老感觉没有SVN上传代码下载代码太不方便!决定配置个SVN服务器! 1.安装Subversion $ sudo apt-get install subversion $ s ...

  2. xlistview的XML(脚)xlistview_footer

    <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=" ...

  3. LINQ to XML 实战

    LINQ to XML 轴定义:创建XML树或将XML文档加载到XML树之后,可以进行查询,从而查找元素并检索它们的值. 两类轴方法:-一些轴就是XELement和XDocument类中返回IEnum ...

  4. [HDU 2068] RPG的错排 (错排问题)

    RPG的错排 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2068 题目大意: 有N个人对应N个名字,然后你去把每一个名字对应到每个人,只要求答对一半 ...

  5. scp和pscp

    在linux中,我们常用scp命令传输文件: 如以下实例,我们想把当前服务器文件abc.sql传输到192.168.1.1服务器上,我们可以执行以下命令: scp /home/person/hww/a ...

  6. 50条规则提高PHP开发提高效率技巧

    0.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作 参数的“函数”(译注:PHP手 ...

  7. ActiveMQ下载与安装(Linux环境下进行)

    下载 官方网站:http:activemq.apache.org/ 安装(liunx) 1.将apache-activemq-5.12.0-bin.tar.gz(liunx环境下的压缩包)上传至服务器 ...

  8. 远程计算机或设备将不接受连接(电脑能连接网络、QQ能登陆、浏览器无法使用)

    第一种方法 1.win+r 2.输入regedit,打开注册表 3.查找Internet Settings(在HKEY_CURRENT_USER\Software\Microsoft\Windows\ ...

  9. system的消息队列实例

    1\创建或打开消息队列函数原型:int msgget(key_t key, int msgflg)参数第一个参数为ftok方法创建的一个kety_t或者为一个整数值第二个参数为逻辑控制,IPC_CRE ...

  10. ssh连接卡在【To escape to local shell, press &#39;Ctrl+Alt+]&#39;.】的解决方法

    一.现象 1.使用xshell连接远程主机的时候一直卡在To escape to local shell, press 'Ctrl+Alt+]'.,要等很久才能连上: Connecting to 19 ...