效果

效果如下

实现思路

  1. 使用box-shadow属性画几个灰色的圆,将这些圆错落的组合在一起,形成乌云图案
  2. after伪元素写乌云下的投影
  3. 增加动画

dom结构

用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写乌云的样式。

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

css样式

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

body{
background: rgba(73, 74, 95, 1);
} .container{
width: 170px;
height: 170px;
position: relative;
margin: 250px auto;
}

2、乌云的样式,乌云有一个上下移动的动画。这儿关键是box-shadow属性的使用,白色的话就可以当作多云的天气图标啦~

.cloudy{
width: 50px;
height: 50px;
position: absolute;
top: 70px;
left: 80px;
margin-left: -60px;
background: #ccc;
border-radius: 50%;
box-shadow: #ccc 65px -10px 0 -5px,
#ccc 25px -25px,
#ccc 30px 10px,
#ccc 60px 15px 0 -10px,
#ccc 85px 5px 0 -5px;
animation: cloudy 5s ease-in-out infinite;
} @keyframes cloudy{
50%{
transform: translateY(-20px);
}
}

3、投影的样式,可以使用after伪元素,别忘了同样是有移动动画的

.cloudy::after{
content: '';
width: 120px;
height: 15px;
position: absolute;
bottom: -60px;
left: 5px;
background: #000;
border-radius: 50%;
opacity: 0.2;
animation: cloudy-shadow 5s ease-in-out infinite;
transform: scale(0.7);
} @keyframes cloudy-shadow{
50%{
transform: translateY(20px) scale(1);
opacity: 0.05;
}
}

OK,搞定。按着步骤来,你也可以在你的页面上实现乌云的天气图标咯~

纯css实现乌云密布的天气图标的更多相关文章

  1. 纯css写一个大太阳的天气图标

    效果 效果图如下 ​ 实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构 用两个嵌套的div容器,父容器来 ...

  2. 一个纯CSS DIV天气动画图标【转扒的】

    <p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...

  3. 纯css制作电闪雷鸣的天气图标

    效果 效果图如下 ​ 实现思路 使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案 after伪元素写下面的投影样式 before伪元素写黄色闪电的样式 dom结构 用两个嵌 ...

  4. 一个标签的72变,打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  5. 手把手教你打造一个纯CSS图标库

    来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?) 主题说完了,下面进入正题. ...

  6. 有趣的纯CSS实现动态晴阴雨雪

    我们先来看看实现的效果吧 非常的美腻,对吧.这个是纯css,且单标签实现的哦~ 先贴完整代码,我们再来看看这个里面究竟有什么可以借鉴的知识点 <!DOCTYPE html> <htm ...

  7. 摘记 史上最强大的40多个纯CSS绘制的图形(一)

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  8. 史上最强大的40多个纯CSS绘制的图形

    Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...

  9. 利用target的特性,可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

随机推荐

  1. Netty学习(九)-Netty编解码技术之Marshalling

    前面我们讲过protobuf的使用,主流的编解码框架其实还有很多种: ①JBoss的Marshalling包 ②google的Protobuf ③基于Protobuf的Kyro ④Apache的Thr ...

  2. 【0809 | Day 12】可变长参数/函数的对象/函数的嵌套/名称空间与作用域

    可变长参数 一.形参 位置形参 默认形参 二.实参 位置实参 关键字实参 三.可变长参数之* def func(name,pwd,*args): print('name:',name,'pwd:',p ...

  3. viewpager+fragment结合

    public class MainActivity extends AppCompatActivity implements View.OnClickListener { private ViewPa ...

  4. java高并发系列 - 第25天:掌握JUC中的阻塞队列

    这是java高并发系列第25篇文章. 环境:jdk1.8. 本文内容 掌握Queue.BlockingQueue接口中常用的方法 介绍6中阻塞队列,及相关场景示例 重点掌握4种常用的阻塞队列 Queu ...

  5. Windows Server 2008创建域环境

    介绍一下域环境搭建,域主要用于中大型企业,小型企业计算机数量不多,而中大型企业计算机比较多,使用域可以方便管理,安全性也比在工作组中安全 1.安装完操作系统默认都属于WORKGROUP工作组. 2.安 ...

  6. 身体质量指数BMI

    Solution: 方法一:"Python语言程序设计"(中国大学MOOC平台)的答案 分析:对比两种指标,将共性(相同的区间)和异性(不同的区间)细分.这样两种指标的判断条件(不 ...

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

    #include <stdio.h> #include <tchar.h> #include <stdlib.h> #define StackSize 5 #def ...

  8. 欢迎加入我的知识星球:C语言解惑课堂

    我在知识星球上开通了一个有关C语言基础答疑解惑的星球,它叫做:“C语言解惑课堂”.看这名字你就知道虽然有点俗,俗才贴近你的真正需求嘛!这是一个专门帮助C语言初学者答疑解惑的课堂.嗯~~~,关于这个星球 ...

  9. ASP.NET Core MVC 之区域(Area)

    区域(Area)是一个 ASP.NET MVC 功能,用于将相关功能组织为一个单独的命名空间(用于路由)和文件结构(用于视图).使用区域通过向控制器和操作添加 一个路由参数(area)来创建用于路由目 ...

  10. .NET Core C#中级篇2-5 常见实用类

    .NETCore CSharp 中级篇2-5 本节内容为常见实用类和方法的使用 String.Format string.format方法是一个字符串格式化类,它里面的一些写法是对字符串进行指定格式的 ...