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

更新时间：2023-10-20 01:02:01 阅读量：综合文库文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

html5推荐度：
相关推荐

去名企拿高薪到翡翠教育

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

制作方法 HTML结构

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

6. 63 ℉

low of 61 ℉

去名企拿高薪到翡翠教育

11. ...... 12.

复制代码 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.}

翡翠教育集团太原长风校区

教学经理贾鹏

本文来源：https://www.bwwdw.com/article/xzbf.html

相关文章：