纯CSS3扁平风格动态天气图标效果

PetitQ 其他代码 2019-3-05 1.44K 0 0

这是一组使用纯 CSS3 animation 制作的扁平风格动态天气图标效果。这组天气图标共 7 个，分别为：晴天，多云，下雨，彩虹，夜间，闪电和下雪。

HTML 结构

各个图标都是使用一个空的<div>作为容器。有 7 个预置的 class 类分别代表各种天气：

也想出现在这里？联系我们吧

```
<div class="container">
```
```
  <div class="sunny"></div> 
```
```
  <div class="cloudy"></div>
```
```
  <div class="rainy"></div>
```
```
  <div class="snowy"></div>
```
```
  <div class="rainbow"></div>
```
```
  <div class="starry"></div>
```
```
  <div class="stormy"></div>
```
```
</div>
```

CSS 样式

以下雪图标为例，它执行 snowy 动画，并通过 box-shadow 属性来这组云朵效果。

```
.snowy {
```

  -webkit-animation: snowy 5s ease-in-out infinite 1s;

          animation: snowy 5s ease-in-out infinite 1s;

```
  background: #FFFFFF; 
```
```
  border-radius: 50%;
```
```
  box-shadow: 
```
```
    #FFFFFF 65px -15px 0 -5px, 
```
```
    #FFFFFF 25px -25px, 
```
```
    #FFFFFF 30px 10px, 
```
```
    #FFFFFF 60px 15px 0 -10px, 
```
```
    #FFFFFF 85px 5px 0 -5px;
```
```
  display: block;
```
```
  height: 50px;
```
```
  width: 50px;
```
```
  margin-left: -60px;
```
```
  position: absolute;
```
```
  left: 1112px;
```
```
  top: 70px;
```
```
}
```

然后使用:after 伪元素来制作云朵的阴影效果。

```
.snowy:after {
```

  -webkit-animation: snowy_shadow 5s ease-in-out infinite 1s;

          animation: snowy_shadow 5s ease-in-out infinite 1s;

```
  background: #000000;
```
```
  border-radius: 50%;
```
```
  content: '';
```
```
  height: 15px;
```
```
  width: 120px;
```
```
  opacity: 0.2;
```
```
  position: absolute;
```
```
  left: 8px;
```
```
  bottom: -60px;
```
```
  -webkit-transform: scale(.7);
```
```
          transform: scale(.7);
```
```
}
```

使用:before 伪元素来制作雪花效果。

```
.snowy:before {
```

  -webkit-animation: snowy_snow 2s infinite linear;

          animation: snowy_snow 2s infinite linear;

```
  content: '';
```
```
  border-radius: 50%;
```
```
  display: block;
```
```
  height: 7px;
```
```
  width: 7px;
```
```
  opacity: 0.8;
```
```
  -webkit-transform: scale(.9);
```
```
          transform: scale(.9);
```
```
}
```

这个下雪图标共执行了 3 个帧动画。

```
@keyframes snowy {
```

  50% { transform: translateY(-20px); transform: translateY(-20px); }

```
}
```
```
@keyframes snowy_shadow {
```

  50% { transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; }

```
}
```
```
@keyframes snowy_snow {
```
```
  0% {  
```
```
    box-shadow: 
```
```
      rgba(238,238,238,0) 30px 30px, 
```
```
      rgba(238,238,238,0) 40px 40px,  
```
```
      #EEEEEE 50px 75px, 
```
```
      #EEEEEE 55px 50px, 
```
```
      #EEEEEE 70px 100px, 
```
```
      #EEEEEE 80px 95px, 
```
```
      #EEEEEE 110px 45px, 
```
```
      #EEEEEE 90px 35px; 
```
```
  }
```
```
  25% {  
```
```
      box-shadow: 
```
```
      #EEEEEE 30px 45px,
```
```
      #EEEEEE 40px 60px,
```
```
      #EEEEEE 50px 90px,
```
```
      #EEEEEE 55px 65px,
```
```
      rgba(238,238,238,0) 70px 120px,
```
```
      rgba(238,238,238,0) 80px 120px,
```
```
      #EEEEEE 110px 70px,
```
```
      #EEEEEE 90px 60px;
```
```
  }
```
```
  26% {  
```
```
    box-shadow:
```
```
      #EEEEEE 30px 45px,
```
```
      #EEEEEE 40px 60px,
```
```
      #EEEEEE 50px 90px,
```
```
      #EEEEEE 55px 65px,
```
```
      rgba(238,238,238,0) 70px 40px,
```
```
      rgba(238,238,238,0) 80px 20px,
```
```
      #EEEEEE 110px 70px,
```
```
      #EEEEEE 90px 60px; 
```
```
  }
```
```
  50% { 
```
```
    box-shadow:
```
```
      #EEEEEE 30px 70px,
```
```
      #EEEEEE 40px 80px,
```
```
      rgba(238,238,238,0) 50px 100px,
```
```
      #EEEEEE 55px 80px,
```
```
      #EEEEEE 70px 60px,
```
```
      #EEEEEE 80px 45px,
```
```
      #EEEEEE 110px 95px,
```
```
      #EEEEEE 90px 85px;
```
```
  }
```
```
  51% {
```
```
    box-shadow:
```
```
      #EEEEEE 30px 70px,
```
```
      #EEEEEE 40px 80px,
```
```
      rgba(238,238,238,0) 50px 45px,
```
```
      #EEEEEE 55px 80px,
```
```
      #EEEEEE 70px 60px,
```
```
      #EEEEEE 80px 45px,
```
```
      #EEEEEE 110px 95px,
```
```
      #EEEEEE 90px 85px;
```
```
  }
```
```
  75% {
```
```
    box-shadow:
```
```
      #EEEEEE 30px 95px,
```
```
      #EEEEEE 40px 100px,
```
```
      #EEEEEE 50px 60px,
```
```
      rgba(238,238,238,0) 55px 95px,
```
```
      #EEEEEE 70px 80px,
```
```
      #EEEEEE 80px 70px,
```
```
      rgba(238,238,238,0) 110px 120px,
```
```
      rgba(238,238,238,0) 90px 110px;
```
```
  }
```
```
  76% {
```
```
    box-shadow:
```
```
      #EEEEEE 30px 95px,
```
```
      #EEEEEE 40px 100px,
```
```
      #EEEEEE 50px 60px,
```
```
      rgba(238,238,238,0) 55px 35px,
```
```
      #EEEEEE 70px 80px,
```
```
      #EEEEEE 80px 70px,
```
```
      rgba(238,238,238,0) 110px 25px,
```
```
      rgba(238,238,238,0) 90px 15px;
```
```
  }
```
```
  100% {
```
```
    box-shadow:
```
```
      rgba(238,238,238,0) 30px 120px,
```
```
      rgba(238,238,238,0) 40px 120px,
```
```
      #EEEEEE 50px 75px,
```
```
      #EEEEEE 55px 50px,
```
```
      #EEEEEE 70px 100px,
```
```
      #EEEEEE 80px 95px,
```
```
      #EEEEEE 110px 45px,
```
```
      #EEEEEE 90px 35px;
```
```
  }
```
```
}
```

纯 CSS3 扁平风格动态天气图标效果

已有 360 人购买

永久更新：
演示数据：
提取码：dhna

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

其他代码

纯CSS3扁平风格动态天气图标效果

HTML 结构

CSS 样式

纯 CSS3 扁平风格动态天气图标效果

相关文章

用纯CSS3制作美丽的加载等待动画

中国省市区地址三级联动jQuery插件

jquery.tabulation 兼容bootstrap的jQuery分页插件

发表回复取消回复

热销模板

其他代码

HTML 结构

CSS 样式

纯 CSS3 扁平风格动态天气图标效果

相关文章

发表回复 取消回复

热销模板

发表回复取消回复