效果
效果如下
实现思路
使用box-shadow属性画几个灰色的圆,将这些圆错落的组合在一起,形成乌云图案
after伪元素写乌云下的投影
增加动画
dom结构
用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写乌云的样式。
<div class=container>
<div class=cloudy></div>
</div>
css样式
1、父容器样式,顺便给整个页面加一个背景色,方便预览
body{
background: rgba(73, 74, 95, 1);
}
.container{
width