html写轮眼动画效果,纯css3制作写轮眼开眼及进化过程

1 *{margin:0;padding:0;}

2 .container{width:750px;height:200px;margin:30px auto;overflow:hidden;background:#000;position:relative;}

3 .eyesBoxs{width:130px;height:70px;position:absolute;top:50px;}

4 .pullLeft{left:100px;}

5 .pullRight{right:100px;}

6 .profile{

7 width:130px;

8 height:70px;

9 background:#fff;

10 position:absolute;

11 top:0;

12 left:0;

13 overflow:hidden;

14 border-radius:0 70px 0 50px;

15 }

16 .shadow{

17 display:block;

18 width:130px;

19 height:70px;

20 position:absolute;

21 top:0;

22 z-index:5;

23 border-radius:0 90px 0 60px;

24 box-shadow:5px 12px 2px 5px rgba(0,0,0,.25) inset;

25 }

26 .skewLeft{

27 transform:skewX(15deg);

28 -webkit-transform:skewX(15deg);

29 -o-transform:skewX(15deg);

30 }

31 .skewRight{

32 transform:skewX(-15deg) scale(-1,1);

33 -webkit-transform:skewX(-15deg) scale(-1,1);

34 -o-transform:skewX(-15deg) scale(-1,1);

35 }

36 .basic{

37 width:60px;

38 height:60px;

39 background:#000;

40 position:absolute;

41 top:50%;

42 left:50%;

43 z-index:10;

44 margin-top:-30px;

45 border-radius:60%;

46 }

47 .basic:before{

48 content:"";

49 display:block;

50 width:10px;

51 height:11px;

52 position:absolute;

53 left:15px;

54 top:15px;

55 z-index:100;

56 border-radius:60%;

57 background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));

58 -webkit-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));

59 -o-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));

60 }

61 .pullLeft .basic{

62 margin-left:-33px;

63 }

64 .pullRight .basic{

65 margin-left:-27px;

66 }

67 .eyes{

68 width:55px;

69 height:55px;

70 background:#ff0000;

71 position:absolute;

72 top:8px;

73 border-radius:60%;

74 box-shadow:0 0 2px 4px #bd0000 inset,0 0 0 2px #000;

75 }

76 .pullLeft .eyes{left:35px;}

77 .pullRight .eyes{right:35px;}

78 .eyes .line{

79 width:64%;

80 height:64%;

81 background:#ff0000;

82 position:absolute;

83 right:0;

84 left:0;

85 top:10px;

86 margin:0 auto;

87 border-radius:60%;

88 box-shadow:0 0 2px 0 #b20000 inset;

89 }

90 .eyes .line:before{

91 content:"";

92 display:block;

93 width:10px;

94 height:11px;

95 position:absolute;

96 left:3px;

97 top:4px;

98 z-index:100;

99 border-radius:60%;

100 background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));

101 -webkit-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));

102 -o-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));

103 }

104 .eyes .line:after{

105 content:"";

106 display:block;

107 width:10px;

108 height:10px;

109 position:absolute;

110 background:#000;

111 right:0;

112 left:-1px;

113 top:13px;

114 z-index:100;

115 margin:0 auto;

116 border-radius:60%;

117 transform:rotate(150deg);

118 -webkit-transform:rotate(150deg);

119 -o-transform:rotate(150deg);

120 animation:colour 20s ease-in infinite;

121 -webkit-animation:colour 20s ease-in infinite;

122 -o-animation:colour 20s ease-in infinite;

123 }

124 @keyframes colour{

125 0%{background:#000;}

126 35%{background:#000;}

127 40%{background:#f00;}

128 100%{background:#f00;}

129 }130 @-webkit-keyframes colour{

131 0%{background:#000;}

132 35%{background:#000;}

133 40%{background:#f00;}

134 100%{background:#f00;}

135 }136 @-o-keyframes colour{

137 0%{background:#000;}

138 35%{background:#000;}

139 40%{background:#f00;}

140 100%{background:#f00;}

141 }142 /*******三勾玉 开始*******/

143 .hook{

144 width:92%;

145 height:92%;

146 position:absolute;

147 right:0;

148 left:0;

149 top:5%;

150 margin:0 auto;

151 border-radius:60%;

152 }

153 .hook .bar{

154 display:block;

155 width:100%;

156 height:100%;

157 position:absolute;

158 left:0;

159 top:0;

160 border-radius:60%;

161 }

162 .hook .bar b{

163 display:block;

164 width:8px;

165 height:8px;

166 background:#000;

167 position:absolute;

168 left:0;

169 bottom:0;

170 border-radius:60%;

171 }

172 .hook .bar b:after{

173 content:"";

174 width:8px;

175 height:8px;

176 border-color:transparent transparent #000 transparent;

177 border-style:solid;

178 border-width:0 0 5px 0;

179 position:absolute;

180 top:-1px;

181 left:-3px;

182 z-index:100;

183 border-radius:0 0 0 70%;

184 transform:rotate(-75deg);

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

186 -o-transform:rotate(-75deg);

187 }

188 .hook .bar:nth-child(1){

189 transform:rotate(10deg);

190 -webkit-transform:rotate(10deg);

191 -o-transform:rotate(10deg);

192 }

193 .hook .bar:nth-child(2){

194 transform:rotate(130deg);

195 -webkit-transform:rotate(130deg);

196 -o-transform:rotate(130deg);

197 }

198 .hook .bar:nth-child(3){

199 transform:rotate(250deg);

200 -webkit-transform:rotate(250deg);

201 -o-transform:rotate(250deg);

202 }

203 /*******三勾玉 结束*******/

204 /*******万花筒 开始*******/

205 .tube{

206 width:93%;

207 height:93%;

208 position:absolute;

209 right:0;

210 left:0px;

211 top:2px;

212 margin:0 auto;

213 background:#000;

214 border-radius:60%;

215 }

216 .tube .bar{

217 display:block;

218 width:10px;

219 height:20px;

220 border-style:solid;

221 border-width:0 0 0 10px;

222 border-color:transparent transparent transparent black;

223 position:absolute;

224 border-radius:100% 0 0 0;

225 }

226 .tube .bar:nth-child(1){

227 top:-10px;

228 left:2px;

229 transform:rotate(-10deg);

230 }

231 .tube .bar:nth-child(2){

232 bottom:0px;

233 right:-10px;

234 transform:rotate(105deg);

235 -webkit-transform:rotate(105deg);

236 -o-transform:rotate(105deg);

237 }

238 .tube .bar:nth-child(3){

239 bottom:-3px;

240 left:-10px;

241 transform:rotate(235deg);

242 -webkit-transform:rotate(235deg);

243 -o-transform:rotate(235deg);

244 }

245 /*******万花筒 结束*******/

246 /*******轮回眼 开始*******/

247 .trans{

248 width:130px;

249 height:70px;

250 position:absolute;

251 overflow:hidden;

252 top:0;

253 left:0;

254 border-radius:0 70px 0 50px;

255 }

256 .trans .bar{

257 display:block;

258 width:9px;

259 height:9px;

260 background:#000;

261 position:absolute;

262 top:50%;

263 z-index:2;

264 margin:-4px 0 0 -4px;

265 border-radius:60%;

266 }

267 .trans .bar:after{

268 content:"";

269 display:block;

270 width:11px;

271 height:12px;

272 position:absolute;

273 top:-13px;

274 left:-13px;

275 z-index:100;

276 border-radius:60%;

277 background:rgba(250,250,250,.85);

278 }

279 .pullLeft .trans .bar{

280 transform:skewX(-15deg);

281 -webkit-transform:skewX(-15deg);

282 -o-transform:skewX(-15deg);

283 }

284 .pullLeft .trans .bar{left:48%;}

285 .pullRight .trans .bar{

286 transform:skewX(-15deg) scale(-1,1);

287 -webkit-transform:skewX(-15deg) scale(-1,1);

288 -o-transform:skewX(-15deg) scale(-1,1);

289 }

290 .pullRight .trans .bar{right:48%;}

291 /*******轮回眼 结束*******/

292 .ani-narrow{

293 animation:ani-narrow 20s ease-out infinite;

294 -webkit-animation:ani-narrow 20s ease-out infinite;

295 -o-animation:ani-narrow 20s ease-out infinite;

296 }

297 @keyframes ani-narrow{

298 0%{opacity:1;transform:scale(1);}

299 5%{opacity:1;transform:scale(1);}

300 10%{opacity:0;transform:scale(0);}

301 87%{opacity:0;transform:scale(0);}

302 90%{opacity:1;transform:scale(1);}

303 100%{opacity:1;transform:scale(1);}

304 }305 @-webkit-keyframes ani-narrow{

306 0%{opacity:1;-webkit-transform:scale(1);}

307 5%{opacity:1;-webkit-transform:scale(1);}

308 10%{opacity:0;-webkit-transform:scale(0);}

309 87%{opacity:0;-webkit-transform:scale(0);}

310 90%{opacity:1;-webkit-transform:scale(1);}

311 100%{opacity:1;-webkit-transform:scale(1);}

312 }313 @-o-keyframes ani-narrow{

314 0%{opacity:1;-o-transform:scale(1);}

315 5%{opacity:1;-o-transform:scale(1);}

316 10%{opacity:0;-o-transform:scale(0);}

317 87%{opacity:0;-o-transform:scale(0);}

318 90%{opacity:1;-o-transform:scale(1);}

319 100%{opacity:1;-o-transform:scale(1);}

320 }321 .ani-zoom{

322 animation:ani-zoom 20s linear infinite;

323 -webkit-animation:ani-zoom 20s linear infinite;

324 -o-animation:ani-zoom 20s linear infinite;

325 }

326 @keyframes ani-zoom{

327 0%{opacity:0;transform:scale(0);}

328 5%{opacity:0;transform:scale(0);}

329 8%{opacity:1;transform:scale(1);}

330 60%{opacity:1;transform:scale(1);}

331 62%{opacity:0;transform:scale(1.5);}

332 100%{opacity:0;transform:scale(0);}

333 }334 @-webkit-keyframes ani-zoom{

335 0%{opacity:0;-webkit-transform:scale(0);}

336 5%{opacity:0;-webkit-transform:scale(0);}

337 8%{opacity:1;-webkit-transform:scale(1);}

338 60%{opacity:1;-webkit-transform:scale(1);}

339 62%{opacity:0;-webkit-transform:scale(1.5);}

340 100%{opacity:0;-webkit-transform:scale(0);}

341 }342 @-o-keyframes ani-zoom{

343 0%{opacity:0;-o-transform:scale(0);}

344 5%{o

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理