HTML5 Canvas和jQuery实用实时天气预报事例！

　　这是一款非常有意思的纯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. }   

复制代码

游客，如果您要查看本帖隐藏内容请回复

<请加QQ群获取解压密码>

<QQ群：712701988>