效果

效果如下

实现思路

  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. React预备知识点

    1.react中的状态提升 react的状态提升就是用户对子组件操作,子组件不改变自己的状态,而是通过自己的props把操作改变的数据传递给父组件,改变父组件的状态,从而改变受父组件控制的所有子组件的 ...

  2. python接口测试入门1-什么是接口测试

    为什么要做接口测试 在日常开发过程中,有人做前端开发,有人负责后端开发.接口就是连接前后台,由于前端开发和后端开发的速度可能不一样,例如后端开发好了,但是前端没有开发.那么我们是不是就不需要测试呢?一 ...

  3. UI 组件 | Toggle

    Toggle(复选框)组件 Toggle 是一个 CheckBox,当它和 ToggleGroup 一起使用的时候,可以变成 RadioButton. 创建 Toggle 组件 层级管理器右击-> ...

  4. springboot中的springSession的存储和获取

    利用redis进行springSession的存储: 存储: // 在session中保存用户信息 HttpSession session = httpRequest.getSession(true) ...

  5. Mysql主从复制原理及搭建

    ## Mysql主从复制原理 主从复制是指一台服务器充当主数据库服务器,另一台或多台服务器充当从数据库服务器,主服务器中的数据自动复制到从服务器之中.对于多级复制,数据库服务器即可充当主机,也可充当从 ...

  6. Java web部分-面试题

    1.Tomcat的优化经验 答:去掉对web.xml的监视,把jsp提前编辑成Servlet. 有富余物理内存的情况,加大tomcat使用的jvm的内存 2.Servlet的生命周期 答:servle ...

  7. Linux环境搭建 | VMware下共享文件夹的实现

    在进行程序开发的过程中,我们经常要在主机与虚拟机之间传递文件,比如说,源代码位于虚拟机,而在主机下阅读或修改源代码,这里就需要使用到 「共享文件」 这个机制了.本文介绍了两种共享文件夹的实现机制:VM ...

  8. three.js实现球体地球城市模拟迁徙

    概况如下:1.SphereGeometry实现自转的地球:2.THREE.ImageUtils.loadTexture加载地图贴图材质:3.THREE.Math.degToRad,Math.sin,M ...

  9. JSP学习笔记(1)——Jsp指令、动作元素和内置对象

    简单来说,javaweb技术就是让服务器端能够执行Java代码,之后返回数据给客户端(浏览器)让客户端显示数据 jsp页面中可以嵌套java代码(java小脚本)和嵌套Web前端(html,css,j ...

  10. WebGL简易教程(三):绘制一个三角形(缓冲区对象)

    目录 1. 概述 2. 示例:绘制三角形 1) HelloTriangle.html 2) HelloTriangle.js 3) 缓冲区对象 (1) 创建缓冲区对象(gl.createBuffer( ...