css3 呼吸的莲花_CSS3 莲花盛开动画

1

2

3

CSS3制作莲花开放动画-柯乐义

4

5

6 /*定义Mixins*/

7 @keyframes openAnimate{

8 to {9 -webkit-transform:rotate(360deg);

10 -webkit-transform-origin:top right;

11 -moz-transform:rotate(360deg);

12 -moz-transform-origin:top right;

13 -ms-transform:rotate(360deg);

14 -ms-transform-origin:top right;

15 -o-transform:rotate(360deg);

16 -o-transform-origin:top right;

17 transform:rotate(360deg);

18 transform-origin:top right;

19 }

20 }21 body{

22 background-color:#ccc;

23 }

24 .demo{

25 width:225px;

26 height:225px;

27 margin:300px auto 0;

28 position:relative;

29 -webkit-transform:rotate(135deg);

30 -webkit-transform-origin:center center;

31 -moz-transform:rotate(135deg);

32 -moz-transform-origin:center center;

33 -ms-transform:rotate(135deg);

34 -ms-transform-origin:center center;

35 -o-transform:rotate(135deg);

36 -o-transform-origin:center center;

37 transform:rotate(135deg);

38 transform-origin:center center;

39 }

40 .demo .leaf{

41 width:150px;

42 height:150px;

43 border-radius:150px 0px;

44 background:linear-gradient(45deg, #bcbec0 8%, #9e1f63 30%, #9e1f63 100%);

45 opacity:0.6;

46 filter:alpha(opacity=60);

47 position:absolute;

48 margin-top:400px;

49 -webkit-animation:openAnimate 6s ease-in-out infinite alternate;

50 -moz-animation:openAnimate 6s ease-in-out infinite alternate;

51 -o-animation:openAnimate 6s ease-in-out infinite alternate;

52 animation:openAnimate 6s ease-in-out infinite alternate;

53 }

54 .demo .leaf:nth-child( 10n + 10){

55 -webkit-animation-delay:1s;

56 -moz-animation-delay:1s;

57 -o-animation-delay:1s;

58 animation-delay:1s;

59 -webkit-transform:rotate(540deg);

60 -webkit-transform-origin:top right;

61 -moz-transform:rotate(540deg);

62 -moz-transform-origin:top right;

63 -ms-transform:rotate(540deg);

64 -ms-transform-origin:top right;

65 -o-transform:rotate(540deg);

66 -o-transform-origin:top right;

67 transform:rotate(540deg);

68 transform-origin:top right;

69 }

70 .demo .leaf:nth-child( 10n + 9){

71 -webkit-animation-delay:0.9s;

72 -moz-animation-delay:0.9s;

73 -o-animation-delay:0.9s;

74 animation-delay:0.9s;

75 -webkit-transform:rotate(504deg);

76 -webkit-transform-origin:top right;

77 -moz-transform:rotate(504deg);

78 -moz-transform-origin:top right;

79 -ms-transform:rotate(504deg);

80 -ms-transform-origin:top right;

81 -o-transform:rotate(504deg);

82 -o-transform-origin:top right;

83 transform:rotate(504deg);

84 transform-origin:top right;

85 }

86 .demo .leaf:nth-child( 10n + 8){

87 -webkit-animation-delay:0.8s;

88 -moz-animation-delay:0.8s;

89 -o-animation-delay:0.8s;

90 animation-delay:0.8s;

91 -webkit-transform:rotate(468deg);

92 -webkit-transform-origin:top right;

93 -moz-transform:rotate(468deg);

94 -moz-transform-origin:top right;

95 -ms-transform:rotate(468deg);

96 -ms-transform-origin:top right;

97 -o-transform:rotate(468deg);

98 -o-transform-origin:top right;

99 transform:rotate(468deg);

100 transform-origin:top right;

101 }

102 .demo .leaf:nth-child( 10n + 7){

103 -webkit-animation-delay:0.7s;

104 -moz-animation-delay:0.7s;

105 -o-animation-delay:0.7s;

106 animation-delay:0.7s;

107 -webkit-transform:rotate(432deg);

108 -webkit-transform-origin:top right;

109 -moz-transform:rotate(432deg);

110 -moz-transform-origin:top right;

111 -ms-transform:rotate(432deg);

112 -ms-transform-origin:top right;

113 -o-transform:rotate(432deg);

114 -o-transform-origin:top right;

115 transform:rotate(432deg);

116 transform-origin:top right;

117 }

118 .demo .leaf:nth-child( 10n + 6){

119 -webkit-animation-delay:0.6s;

120 -moz-animation-delay:0.6s;

121 -o-animation-delay:0.6s;

122 animation-delay:0.6s;

123 -webkit-transform:rotate(396deg);

124 -webkit-transform-origin:top right;

125 -moz-transform:rotate(396deg);

126 -moz-transform-origin:top right;

127 -ms-transform:rotate(396deg);

128 -ms-transform-origin:top right;

129 -o-transform:rotate(396deg);

130 -o-transform-origin:top right;

131 transform:rotate(396deg);

132 transform-origin:top right;

133 }

134 .demo .leaf:nth-child( 10n + 5){

135 -webkit-animation-delay:0.5s;

136 -moz-animation-delay:0.5s;

137 -o-animation-delay:0.5s;

138 animation-delay:0.5s;

139 -webkit-transform:rotate(360deg);

140 -webkit-transform-origin:top right;

141 -moz-transform:rotate(360deg);

142 -moz-transform-origin:top right;

143 -ms-transform:rotate(360deg);

144 -ms-transform-origin:top right;

145 -o-transform:rotate(360deg);

146 -o-transform-origin:top right;

147 transform:rotate(360deg);

148 transform-origin:top right;

149 }

150 .demo .leaf:nth-child( 10n + 4){

151 -webkit-animation-delay:0.4s;

152 -moz-animation-delay:0.4s;

153 -o-animation-delay:0.4s;

154 animation-delay:0.4s;

155 -webkit-transform:rotate(324deg);

156 -webkit-transform-origin:top right;

157 -moz-transform:rotate(324deg);

158 -moz-transform-origin:top right;

159 -ms-transform:rotate(324deg);

160 -ms-transform-origin:top right;

161 -o-transform:rotate(324deg);

162 -o-transform-origin:top right;

163 transform:rotate(324deg);

164 transform-origin:top right;

165 }

166 .demo .leaf:nth-child( 10n + 3){

167 -webkit-animation-delay:0.3s;

168 -moz-animation-delay:0.3s;

169 -o-animation-delay:0.3s;

170 animation-delay:0.3s;

171 -webkit-transform:rotate(288deg);

172 -webkit-transform-origin:top right;

173 -moz-transform:rotate(288deg);

174 -moz-transform-origin:top right;

175 -ms-transform:rotate(288deg);

176 -ms-transform-origin:top right;

177 -o-transform:rotate(288deg);

178 -o-transform-origin:top right;

179 transform:rotate(288deg);

180 transform-origin:top right;

181 }

182 .demo .leaf:nth-child( 10n + 2){

183 -webkit-animation-delay:0.2s;

184 -moz-animation-delay:0.2s;

185 -o-animation-delay:0.2s;

186 animation-delay:0.2s;

187 -webkit-transform:rotate(252deg);

188 -webkit-transform-origin:top right;

189 -moz-transform:rotate(252deg);

190 -moz-transform-origin:top right;

191 -ms-transform:rotate(252deg);

192 -ms-transform-origin:top right;

193 -o-transform:rotate(252deg);

194 -o-transform-origin:top right;

195 transform:rotate(252deg);

196 transform-origin:top right;

197 }

198 .demo .leaf:nth-child( 10n + 1){

199 -webkit-animation-delay:0.1s;

200 -moz-animation-delay:0.1s;

201 -o-animation-delay:0.1s;

202 animation-delay:0.1s;

203 -webkit-transform:rotate(216deg);

204 -webkit-transform-origin:top right;

205 -moz-transform:rotate(216deg);

206 -moz-transform-origin:top right;

207 -ms-transform:rotate(216deg);

208 -ms-transform-origin:top right;

209 -o-transform:rotate(216deg);

210 -o-transform-origin:top right;

211 transform:rotate(216deg);

212 transform-origin:top right;

213 }

214

215

216

217

CSS3制作莲花开放

218

219

220

221