如何利用html5和css3动画排列人物头像

本篇内容介绍了“如何利用html5和css3动画排列人物头像”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

　　今天给大家分享一款html5和css3动画排列人物头像演示。这款实例页面初始时，只有中间的美女图，然后出现微笑图，紧接着出现小的人物图，慢慢的以动画的形式排列到页面中形成一个圆环。效果图如下：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

1. <div class='stage'>  

2.         <div class='image'>  

3.             <img class="lazy" data-src="https://pbs.twimg.com/profile_images/529224080751202304/UNLt5nUZ_400x400.jpeg">  

4.             <div class='smiley'>  

5.                 <svg width="30px" height="30px">  

6.                     <path fill="#effedd" d="M15,0C6.7,0,0,6.7,0,15c0,8.3,6.7,15,15,15s15-6.7,15-15C30,6.7,23.3,0,15,0z M20.5,8c1.4,0,2.5,1.1,2.5,2.5c0,1.4-1.1,2.5-2.5,2.5S18,11.9,18,10.5C18,9.1,19.1,8,20.5,8z M10.5,8c1.4,0,2.5,1.1,2.5,2.5c0,1.4-1.1,2.5-2.5,2.5S8,11.9,8,10.5C8,9.1,9.1,8,10.5,8z M15,26c-5,0-9-4-9-9h4c0,3.3,2.7,6,6,6s6-2.7,6-6h4C24,22,20,26,15,26z" /></svg>  

7.             </div>  

8.         </div>  

9.         <figure class='avatar'>  

10.         </figure>  

11.         <figure class='avatar'>  

12.         </figure>  

13.         <figure class='avatar'>  

14.         </figure>  

15.         <figure class='avatar'>  

16.         </figure>  

17.         <figure class='avatar'>  

18.         </figure>  

19.         <figure class='avatar'>  

20.         </figure>  

21.         <figure class='avatar'>  

22.         </figure>  

23.         <figure class='avatar'>  

24.         </figure>  

25.     </div>  

　　css3代码：

CSS Code复制内容到剪贴板

1. .stage {   

2.   position: absolute;   

3.   top: 0;   

4.   rightright: 0;   

5.   bottombottom: 0;   

6.   left: 0;   

7.   margin: auto;   

8.   height: 460px;   

9.   width: 480px;   

10. }   

11.   

12. .avatar {   

13.   position: absolute;   

14.   top: 0;   

15.   rightright: 0;   

16.   bottombottom: 0;   

17.   left: 0;   

18.   margin: auto;   

19.   height: 64px;   

20.   width: 64px;   

21.   background-repeat: no-repeat;   

22.   background-size: cover;   

23.   border-radius: 50%;   

24.   -webkit-transform-origin: center;   

25.       -ms-transform-origin: center;   

26.           transform-origin: center;   

27. }   

28. .avatar:before {   

29.   content: '';   

30.   position: absolute;   

31.   top: -8%;   

32.   rightright: -8%;   

33.   height: 17.06667px;   

34.   width: 17.06667px;   

35.   background: #bec4bc;   

36.   border-radius: 50%;   

37.   border: 3px solid white;   

38. }   

39. .avatar:nth-of-type(1) {   

40.   -webkit-animation: ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

41.           animation: ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

42. }   

43. @-webkit-keyframes ani1 {   

44.   0%, 20% {   

45.     -webkit-transform: rotate(45deg) translate(0) rotate(-45deg);   

46.             transform: rotate(45deg) translate(0) rotate(-45deg);   

47.   }   

48.   34%, 100% {   

49.     -webkit-transform: rotate(45deg) translate(208px) rotate(-45deg);   

50.             transform: rotate(45deg) translate(208px) rotate(-45deg);   

51.   }   

52. }   

53. @keyframes ani1 {   

54.   0%, 20% {   

55.     -webkit-transform: rotate(45deg) translate(0) rotate(-45deg);   

56.             transform: rotate(45deg) translate(0) rotate(-45deg);   

57.   }   

58.   34%, 100% {   

59.     -webkit-transform: rotate(45deg) translate(208px) rotate(-45deg);   

60.             transform: rotate(45deg) translate(208px) rotate(-45deg);   

61.   }   

62. }   

63. .avatar:nth-of-type(2) {   

64.   -webkit-animation: ani2 2s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

65.           animation: ani2 2s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

66. }   

67. @-webkit-keyframes ani2 {   

68.   0%, 20% {   

69.     -webkit-transform: rotate(90deg) translate(0) rotate(-90deg);   

70.             transform: rotate(90deg) translate(0) rotate(-90deg);   

71.   }   

72.   34%, 100% {   

73.     -webkit-transform: rotate(90deg) translate(208px) rotate(-90deg);   

74.             transform: rotate(90deg) translate(208px) rotate(-90deg);   

75.   }   

76. }   

77. @keyframes ani2 {   

78.   0%, 20% {   

79.     -webkit-transform: rotate(90deg) translate(0) rotate(-90deg);   

80.             transform: rotate(90deg) translate(0) rotate(-90deg);   

81.   }   

82.   34%, 100% {   

83.     -webkit-transform: rotate(90deg) translate(208px) rotate(-90deg);   

84.             transform: rotate(90deg) translate(208px) rotate(-90deg);   

85.   }   

86. }   

87. .avatar:nth-of-type(3) {   

88.   -webkit-animation: ani3 2s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

89.           animation: ani3 2s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

90. }   

91. @-webkit-keyframes ani3 {   

92.   0%, 20% {   

93.     -webkit-transform: rotate(135deg) translate(0) rotate(-135deg);   

94.             transform: rotate(135deg) translate(0) rotate(-135deg);   

95.   }   

96.   34%, 100% {   

97.     -webkit-transform: rotate(135deg) translate(208px) rotate(-135deg);   

98.             transform: rotate(135deg) translate(208px) rotate(-135deg);   

99.   }   

100. }   

101. @keyframes ani3 {   

102.   0%, 20% {   

103.     -webkit-transform: rotate(135deg) translate(0) rotate(-135deg);   

104.             transform: rotate(135deg) translate(0) rotate(-135deg);   

105.   }   

106.   34%, 100% {   

107.     -webkit-transform: rotate(135deg) translate(208px) rotate(-135deg);   

108.             transform: rotate(135deg) translate(208px) rotate(-135deg);   

109.   }   

110. }   

111. .avatar:nth-of-type(4) {   

112.   -webkit-animation: ani4 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

113.           animation: ani4 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

114. }   

115. @-webkit-keyframes ani4 {   

116.   0%, 20% {   

117.     -webkit-transform: rotate(180deg) translate(0) rotate(-180deg);   

118.             transform: rotate(180deg) translate(0) rotate(-180deg);   

119.   }   

120.   34%, 100% {   

121.     -webkit-transform: rotate(180deg) translate(208px) rotate(-180deg);   

122.             transform: rotate(180deg) translate(208px) rotate(-180deg);   

123.   }   

124. }   

125. @keyframes ani4 {   

126.   0%, 20% {   

127.     -webkit-transform: rotate(180deg) translate(0) rotate(-180deg);   

128.             transform: rotate(180deg) translate(0) rotate(-180deg);   

129.   }   

130.   34%, 100% {   

131.     -webkit-transform: rotate(180deg) translate(208px) rotate(-180deg);   

132.             transform: rotate(180deg) translate(208px) rotate(-180deg);   

133.   }   

134. }   

135. .avatar:nth-of-type(5) {   

136.   -webkit-animation: ani5 2s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

137.           animation: ani5 2s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

138. }   

139. @-webkit-keyframes ani5 {   

140.   0%, 20% {   

141.     -webkit-transform: rotate(225deg) translate(0) rotate(-225deg);   

142.             transform: rotate(225deg) translate(0) rotate(-225deg);   

143.   }   

144.   34%, 100% {   

145.     -webkit-transform: rotate(225deg) translate(208px) rotate(-225deg);   

146.             transform: rotate(225deg) translate(208px) rotate(-225deg);   

147.   }   

148. }   

149. @keyframes ani5 {   

150.   0%, 20% {   

151.     -webkit-transform: rotate(225deg) translate(0) rotate(-225deg);   

152.             transform: rotate(225deg) translate(0) rotate(-225deg);   

153.   }   

154.   34%, 100% {   

155.     -webkit-transform: rotate(225deg) translate(208px) rotate(-225deg);   

156.             transform: rotate(225deg) translate(208px) rotate(-225deg);   

157.   }   

158. }   

159. .avatar:nth-of-type(6) {   

160.   -webkit-animation: ani6 2s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

161.           animation: ani6 2s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

162. }   

163. @-webkit-keyframes ani6 {   

164.   0%, 20% {   

165.     -webkit-transform: rotate(270deg) translate(0) rotate(-270deg);   

166.             transform: rotate(270deg) translate(0) rotate(-270deg);   

167.   }   

168.   34%, 100% {   

169.     -webkit-transform: rotate(270deg) translate(208px) rotate(-270deg);   

170.             transform: rotate(270deg) translate(208px) rotate(-270deg);   

171.   }   

172. }   

173. @keyframes ani6 {   

174.   0%, 20% {   

175.     -webkit-transform: rotate(270deg) translate(0) rotate(-270deg);   

176.             transform: rotate(270deg) translate(0) rotate(-270deg);   

177.   }   

178.   34%, 100% {   

179.     -webkit-transform: rotate(270deg) translate(208px) rotate(-270deg);   

180.             transform: rotate(270deg) translate(208px) rotate(-270deg);   

181.   }   

182. }   

183. .avatar:nth-of-type(7) {   

184.   -webkit-animation: ani7 2s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

185.           animation: ani7 2s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

186. }   

187. @-webkit-keyframes ani7 {   

188.   0%, 20% {   

189.     -webkit-transform: rotate(315deg) translate(0) rotate(-315deg);   

190.             transform: rotate(315deg) translate(0) rotate(-315deg);   

191.   }   

192.   34%, 100% {   

193.     -webkit-transform: rotate(315deg) translate(208px) rotate(-315deg);   

194.             transform: rotate(315deg) translate(208px) rotate(-315deg);   

195.   }   

196. }   

197. @keyframes ani7 {   

198.   0%, 20% {   

199.     -webkit-transform: rotate(315deg) translate(0) rotate(-315deg);   

200.             transform: rotate(315deg) translate(0) rotate(-315deg);   

201.   }   

202.   34%, 100% {   

203.     -webkit-transform: rotate(315deg) translate(208px) rotate(-315deg);   

204.             transform: rotate(315deg) translate(208px) rotate(-315deg);   

205.   }   

206. }   

207. .avatar:nth-of-type(8) {   

208.   -webkit-animation: ani8 2s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

209.           animation: ani8 2s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

210. }   

211. @-webkit-keyframes ani8 {   

212.   0%, 20% {   

213.     -webkit-transform: rotate(360deg) translate(0) rotate(-360deg);   

214.             transform: rotate(360deg) translate(0) rotate(-360deg);   

215.   }   

216.   34%, 100% {   

217.     -webkit-transform: rotate(360deg) translate(208px) rotate(-360deg);   

218.             transform: rotate(360deg) translate(208px) rotate(-360deg);   

219.   }   

220. }   

221. @keyframes ani8 {   

222.   0%, 20% {   

223.     -webkit-transform: rotate(360deg) translate(0) rotate(-360deg);   

224.             transform: rotate(360deg) translate(0) rotate(-360deg);   

225.   }   

226.   34%, 100% {   

227.     -webkit-transform: rotate(360deg) translate(208px) rotate(-360deg);   

228.             transform: rotate(360deg) translate(208px) rotate(-360deg);   

229.   }   

230. }   

231. .avatar:nth-of-type(4):before, .avatar:nth-of-type(2):before {   

232.   -webkit-animation: bounce 3s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

233.           animation: bounce 3s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

234. }   

235. .avatar:nth-of-type(7):before {   

236.   -webkit-animation: bounce 3s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

237.           animation: bounce 3s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

238. }   

239. .avatar:nth-of-type(3):before {   

240.   -webkit-animation: bounce 3s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

241.           animation: bounce 3s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

242. }   

243. .avatar:nth-of-type(1):before {   

244.   -webkit-animation: bounce 3s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

245.           animation: bounce 3s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

246. }   

247. .avatar:nth-of-type(6):before {   

248.   -webkit-animation: bounce 3s 3.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

249.           animation: bounce 3s 3.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

250. }   

251. .avatar:nth-of-type(5):before {   

252.   -webkit-animation: bounce 3s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

253.           animation: bounce 3s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

254. }   

255. .avatar:nth-of-type(8):before {   

256.   -webkit-animation: bounce 3s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

257.           animation: bounce 3s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

258. }   

259.   

260. .image {   

261.   position: absolute;   

262.   top: 0;   

263.   rightright: 0;   

264.   bottombottom: 0;   

265.   left: 0;   

266.   margin: auto;   

267.   height: 220px;   

268.   width: 220px;   

269. }   

270. .image img {   

271.   position: relative;   

272.   height: 220px;   

273.   width: 220px;   

274.   border-radius: 50%;   

275.   z-index: 1;   

276. }   

277. .image:before {   

278.   position: absolute;   

279.   top: 0;   

280.   rightright: 0;   

281.   bottombottom: 0;   

282.   left: 0;   

283.   margin: auto;   

284.   content: '';   

285.   height: 100%;   

286.   width: 100%;   

287.   background: #f9fff7;   

288.   border: 3px solid #e7f5d1;   

289.   border-radius: 50%;   

290.   -webkit-animation: pulse 1s 1.4s ease-out;   

291.           animation: pulse 1s 1.4s ease-out;   

292.   -webkit-animation-iteration-count: 3;   

293.           animation-iteration-count: 3;   

294. }   

295. .image .smiley {   

296.   position: absolute;   

297.   top: -8px;   

298.   rightright: -8px;   

299.   height: 64px;   

300.   width: 64px;   

301.   background: #b5e763;   

302.   border-radius: 50%;   

303.   border: 5px solid white;   

304.   -webkit-animation: bounce 5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

305.           animation: bounce 5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

306.   -webkit-transform-origin: center;   

307.       -ms-transform-origin: center;   

308.           transform-origin: center;   

309.   z-index: 1;   

310. }   

311. .image .smiley svg {   

312.   position: absolute;   

313.   top: 0;   

314.   rightright: 0;   

315.   bottombottom: 0;   

316.   left: 0;   

317.   margin: auto;   

318.   -webkit-animation: bounce 5s 0.075s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

319.           animation: bounce 5s 0.075s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

320. }   

321.   

322. @-webkit-keyframes bounce {   

323.   0% {   

324.     -webkit-transform: scale(0);   

325.             transform: scale(0);   

326.   }   

327.   5% {   

328.     -webkit-transform: scale(1.5);   

329.             transform: scale(1.5);   

330.   }   

331.   10%, 100% {   

332.     -webkit-transform: scale(1);   

333.             transform: scale(1);   

334.   }   

335. }   

336.   

337. @keyframes bounce {   

338.   0% {   

339.     -webkit-transform: scale(0);   

340.             transform: scale(0);   

341.   }   

342.   5% {   

343.     -webkit-transform: scale(1.5);   

344.             transform: scale(1.5);   

345.   }   

346.   10%, 100% {   

347.     -webkit-transform: scale(1);   

348.             transform: scale(1);   

349.   }   

350. }   

351. @-webkit-keyframes pulse {   

352.   0% {   

353.     -webkit-transform: scale(0.1, 0.1);   

354.             transform: scale(0.1, 0.1);   

355.     opacity: 0.0;   

356.   }   

357.   50% {   

358.     opacity: 1.0;   

359.   }   

360.   100% {   

361.     -webkit-transform: scale(3);   

362.             transform: scale(3);   

363.     opacity: 0.0;   

364.   }   

365. }   

366. @keyframes pulse {   

367.   0% {   

368.     -webkit-transform: scale(0.1, 0.1);   

369.             transform: scale(0.1, 0.1);   

370.     opacity: 0.0;   

371.   }   

372.   50% {   

373.     opacity: 1.0;   

374.   }   

375.   100% {   

376.     -webkit-transform: scale(3);   

377.             transform: scale(3);   

378.     opacity: 0.0;   

379.   }   

380. }   

381. @-webkit-keyframes colorchange {   

382.   0% {   

383.     background: #bec4bc;   

384.   }   

385.   100% {   

386.     background: #b5e763;   

387.   }   

388. }   

389. @keyframes colorchange {   

390.   0% {   

391.     background: #bec4bc;   

392.   }   

393.   100% {   

394.     background: #b5e763;   

395.   }   

396. }   

397. .avatar:nth-of-type(1) {   

398.   background-image: url("128.jpg");   

399. }   

400.   

401. .avatar:nth-of-type(2) {   

402.   background-image: url("rasagy.jpg");   

403. }   

404.   

405. .avatar:nth-of-type(3) {   

406.   background-image: url("geeftvorm.jpg");   

407. }   

408.   

409. .avatar:nth-of-type(4) {   

410.   background-image: url("VinThomas.jpg");   

411. }   

412.   

413. .avatar:nth-of-type(5) {   

414.   background-image: url("ladylexy.jpg");   

415. }   

416.   

417. .avatar:nth-of-type(6) {   

418.   background-image: url("claudioguglieri.jpg");   

419. }   

420.   

421. .avatar:nth-of-type(7) {   

422.   background-image: url("jina.jpg");   

423. }   

424.   

425. .avatar:nth-of-type(8) {   

426.   background-image: url("peterme.jpg");   

427. }  

“如何利用html5和css3动画排列人物头像”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！