让ICON生动起来 纯CSS实现带动画的天气图标

　CSS3动画属性并不是很多，重点是你怎样把它运用起来并且运用好，从简单的hover状态或复杂的小动画，都可以巧妙的用CSS3动画属性来实现。

 

　　本文想和大家分享一个比较有创意、实用的CSS天气图标动画，静态的天气图标看上去是很呆板，若加上动画，看起来会更加真实生动，以下例子就是很好的参考案例。

 

 

　　下面我们来做一个会下雨的天气图标实例，过程其实很简单哦。

 

 

　　STEP1: 整体HTML架构

1	<div class="icon rainy">

2	<div class="cloud"></div>

3	<div class="rain"></div>

4

</div>

　　STEP2: 用CSS绘制云朵图标

　　CSS代码如下

01

body {

02	max-width: 42em;

03	padding: 2em;

04	margin: 0 auto;

05	color: #161616;

06	font-family: 'Roboto', sans-serif;

07	text-align: center;

08	background-color: currentColor;

09

}

10

11

.icon {

12	position: relative;

13	display: inline-block;

14	width: 12em;

15	height: 10em;

16	font-size: 1em; /* control icon size here */

17

}

18

19

.cloud {

20	position: absolute;

21	z-index: 1;

22

top: 50%;

23	left: 50%;

24	width: 3.6875em;

25	height: 3.6875em;

26	margin: -1.84375em;

27	background: currentColor;

28	border-radius: 50%;

29	box-shadow:

30	-2.1875em 0.6875em 0 -0.6875em,

31	2.0625em 0.9375em 0 -0.9375em,

32	0 0 0 0.375em #fff,

33	-2.1875em 0.6875em 0 -0.3125em #fff,

34	2.0625em 0.9375em 0 -0.5625em #fff;

35

}

36	.cloud:after {

37	content: '';

38	position: absolute;

39	bottom: 0;

40	left: -0.5em;

41	display: block;

42	width: 4.5625em;

43	height: 1em;

44	background: currentColor;

45	box-shadow: 0 0.4375em 0 -0.0625em #fff;

46

}

47	.cloud:nth-child(2) {

48	z-index: 0;

49	background: #fff;

50	box-shadow:

51	-2.1875em 0.6875em 0 -0.6875em #fff,

52	2.0625em 0.9375em 0 -0.9375em #fff,

53	0 0 0 0.375em #fff,

54	-2.1875em 0.6875em 0 -0.3125em #fff,

55	2.0625em 0.9375em 0 -0.5625em #fff;

56	opacity: 0.3;

57	transform: scale(0.5) translate(6em, -3em);

58	animation: cloud 4s linear infinite;

59

}

60	.cloud:nth-child(2):after { background: #fff; }

61

62

.rain{

63	position: absolute;

64	z-index: 2;

65

top: 50%;

66	left: 50%;

67	width: 3.75em;

68	height: 3.75em;

69	margin: 0.375em 0 0 -2em;

70	background: currentColor;

71

}

72

73	.rain:after {

74	content: '';

75	position: absolute;

76	z-index: 2;

77

top: 50%;

78	left: 50%;

79	width: 1.125em;

80	height: 1.125em;

81	margin: -1em 0 0 -0.25em;

82	background: #0cf;

83	border-radius: 100% 0 60% 50% / 60% 0 100% 50%;

84	box-shadow:

85	0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),

86	-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),

87	-1.375em -0.125em 0 rgba(255,255,255,0.2);

88	transform: rotate(-28deg);

89	animation: rain 3s linear infinite; /*设置动画 rain */

90

}

　　STEP3: 下雨动画

01	/* 下雨动画 Animations */

02	@keyframes rain {

03

0% {

04	background: #0cf;

05	box-shadow:

06	0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),

07	-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),

08	-1.375em -0.125em 0 #0cf;

09

}

10

25% {

11	box-shadow:

12	0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),

13	-0.875em 1.125em 0 -0.125em #0cf,

14	-1.375em -0.125em 0 rgba(255,255,255,0.2);

15

}

16

50% {

17	background: rgba(255,255,255,0.3);

18	box-shadow:

19	0.625em 0.875em 0 -0.125em #0cf,

20	-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),

21	-1.375em -0.125em 0 rgba(255,255,255,0.2);

22

}

23

100% {

24	box-shadow:

25	0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),

26	-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),

27	-1.375em -0.125em 0 #0cf;

28

}

29

}

　　最后效果：

 

 

　　如果想看其它天气动画图标的代码，请查看以下网址。

　　在线演示地址&源码：http://codepen.io/joshbader/pen/EjXgqr