图片/图形

纯CSS3扁平风格天气预报卡片动画特效

也想出现在这里?联系我们
创客云

纯CSS3扁平风格天气预报卡片动画特效-云模板
这是一款非常有意思的纯 CSS3 扁平风格天气预报卡片动画特效。该天气预报特效将各种天气制作为卡片形式,包括下雨,闪电,白天,夜间和下雪。卡片使用扁平化风格,并使用 CSS3 帧动画来制作各种动画效果。

HTML 结构

该特效的 HTML 结构采用无序列表的 HTML 结构,其中每一个 li.card 元素代表一种卡片。

也想出现在这里?联系我们
创客主机
  1. <ul class="card-list">
  2.   <li class="card">
  3.     <div class="card-color color-rain">
  4.       <div class="rain"></div>
  5.     </div>
  6.     <div class="card-info">
  7.       <p>63</p>
  8.       <p>low of 61</p>
  9.     </div>
  10.   </li>
  11.   ......
  12. </ul>

CSS 样式

首先给卡片一些基本样式。

也想出现在这里?联系我们
创客主机
  1. .card {
  2.   width: 18.57%;
  3.   background-color: #3c3b3d;
  4.   float: left;
  5.   margin: 0 20px 20px 0;
  6.   overflow: hidden;
  7. }
  8.  
  9. .card:nth-child(5n) {
  10.   margin-right: 0;
  11. }
  12.  
  13. .card .card-color {
  14.   position: relative;
  15.   width: 100%;
  16.   padding: 6.5em 1em;
  17.   display: block;
  18. }
  19.  
  20. .card .card-color:after {
  21.   position: absolute;
  22.   content: '';
  23.   top: 0;
  24.   right: 0;
  25.   height: 100%;
  26.   width: 50%;
  27. }
  28. .card .card-info {
  29.   padding: 1em;
  30.   color: #808080;
  31.   text-align: center;
  32. }
  33.  
  34. .card .card-info p {
  35.   font-size: 0.85rem;
  36.   margin-bottom: .75em;
  37. }
  38.  
  39. .card .card-info p:first-child {
  40.   font-weight: 600;
  41.   font-size: 0.9rem;
  42.   text-transform: uppercase;
  43.   color: #fff;
  44. }
  45.  
  46. .card .card-info p:last-child {
  47.   margin-bottom: 0;
  48. }

对于第一种下雨效果,特效中对 div.rain 元素使用了 rain 帧动画。然后使用 div.rain 元素的:after 伪元素来制作云彩的阴影效果,并应用 rain_shadow 帧动画。最后使用 div.rain 元素的:before 伪元素来制作雨点效果,并应用 rain_rain 帧动画。

  1. .rain {
  2.   animation: rain 9s ease-in-out infinite 1s;
  3.   -webkit-animation: rain 9s ease-in-out infinite 1s;
  4.   background: #CCCCCC;
  5.   border-radius: 50%;
  6.   box-shadow: #CCCCCC 65px -25px 0 -5px, #CCCCCC 25px -25px, #CCCCCC 5px 0px 0 2px, #CCCCCC 10px 0px 0 2px, #CCCCCC 15px 0px 0 2px, #CCCCCC 20px 0px 0 2px, #CCCCCC 25px 0px 0 2px, #CCCCCC 30px 0px 0 2px, #CCCCCC 35px 0px 0 2px, #CCCCCC 40px 0px 0 2px, #CCCCCC 45px 0px 0 2px, #CCCCCC 50px 0px 0 2px, #CCCCCC 55px 0px 0 2px, #CCCCCC 60px 0px 0 2px, #CCCCCC 65px 0px 0 2px, #CCCCCC 70px 0px 0 2px, #CCCCCC 75px 0px 0 2px;
  7.   display: block;
  8.   height: 50px;
  9.   width: 50px;
  10.   position: absolute;
  11.   left: 40px;
  12.   top: 80px;
  13. }
  14.  
  15. .rain:after {
  16.   animation: rain_shadow 9s ease-in-out infinite 1s;
  17.   -webkit-animation: rain_shadow 9s ease-in-out infinite 1s;
  18.   background: #000000;
  19.   border-radius: 50%;
  20.   content: '';
  21.   height: 15px;
  22.   width: 120px;
  23.   opacity: 0.2;
  24.   position: absolute;
  25.   left: 5px;
  26.   bottom: -60px;
  27.   transform: scale(.7);
  28.   -webkit-transform: scale(.7);
  29. }
  30.  
  31. .rain:before {
  32.   animation: rain_rain .7s infinite linear;
  33.   -webkit-animation: rain_rain .7s infinite linear;
  34.   content: '';
  35.   background: transparent;
  36.   margin-left: 0px;
  37.   border-radius: 50%;
  38.   display: block;
  39.   height: 6px;
  40.   width: 3px;
  41.   opacity: 0.3;
  42.   transform: scale(.9);
  43.   -webkit-transform: scale(.9);
  44. }

其它天气预报效果的制作方法基本类似,可以参考下载的源文件。

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
下载地址
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

热销模板

高端信息技术产品展示DedeCMS织梦中英文模板

Envato

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!