html5 및 css3 animation_html5 튜토리얼 기술을 사용하여 캐릭터 아바타를 배열하는 예제 데모

오늘은 HTML5 및 CSS3 애니메이션에서 캐릭터 아바타를 배열하는 데모를 여러분과 공유하고 싶습니다. 이 예제 페이지의 시작 부분에는 중앙에 아름다운 소녀 사진만 있고, 웃는 사진이 나타나고, 작은 캐릭터 사진이 애니메이션 형식으로 천천히 배열되어 페이지에 원을 형성합니다. 렌더링은 다음과 같습니다.

구현 코드.

　html 코드:

XML/HTML 코드클립보드에 콘텐츠 복사

1. <div class='무대' >  
2.         <div class='이미지' >  
3.            <img src="https: //pbs.twimg.com/profile_images/529224080751202304/UNLt5nUZ_400x400.jpeg">  
4.            <div class='smiley' >  
5.                <svg 너비="30px"  높이="30px">  
6.                    <경로 채우기="#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.5 C8,9.1,9.1,8,10.5,8z M15,26c-5,0-9-4-9-9h3c0,3.3,2.7,6,6,6s6-2.7,6-6h3C24,22,20,26,15 ,26z" />svg>  
7.             div>  
8.         div>  
9.         <인물 수업='아바타' >  
10.         그림>  
11.         <인물 수업='아바타' >  
12.         그림>  
13.         <인물 수업='아바타' >  
14.         그림>  
15.         <인물 수업='아바타' >  
16.         그림>  
17.         <인물 수업='아바타' >  
18.         그림>  
19.         <인물 수업='아바타' >  
20.         그림>  
21.         <인물 수업='아바타' >  
22.         그림>  
23.         <인물 수업='아바타' >  
24.         그림>  
25.     div>  

　　css3代码：

CSS 코드复复内容到剪贴板

1. .stage {   
2.   위치: 절대;   
3.   상단: 0;   
4.   맞아맞아: 0;   
5.   하단하단: 0;   
6.   왼쪽: 0;   
7.   여백: 자동;   
8.   높이: 460px;   
9.   너비: 480px;   
10. }   
11.   
12. .avatar {   
13.   위치: 절대;   
14.   상단: 0;   
15.   맞아맞아: 0;   
16.   하단하단: 0;   
17.   왼쪽: 0;   
18.   여백: 자동;   
19.   높이: 64px;   
20.   너비: 64px;   
21.   백그라운드 반복: 반복 금지;   
22.   배경-크기: 표지;   
23.   테두리-반경: 50%;   
24.   -webkit-transform-origin: center;   
25.       -ms-transform-origin: center;   
26.           변환 원본: center;   
27. }  
28. .avatar:이전 {   
29.   콘텐츠: '';   
30.   위치: 절대;   
31.   상위: -8%;   
32.   맞습니다맞습니다: -8%;   
33.   높이: 17.06667px;   
34.   너비: 17.06667px;   
35.   배경: #bec4bc;   
36.   테두리-반경: 50%;   
37.   테두리: 3px 단색 흰색;   
38. }   
39. .avatar:nth-of-type(1) {   
40.   -webkit-animation: ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 전달;   
41.           애니메이션: ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 전달;   
42. }   
43. @-webkit-keyframes ani1 {   
44.   0%, 20% {   
45.     -webkit-transform: 회전(45도) 번역(0) 회전(-45도);   
46.             변형: 회전(45도) 번역(0) 회전(-45도);   
47.   }   
48.   34%, 100% {   
49.     -webkit-transform: 회전(45도) 번역(208px) 회전(-45도);   
50.             변환: 회전(45도) 번역(208px) 회전(-45도);   
51.   }   
52. }   
53. @keyframes ani1 {   
54.   0%, 20% {   
55.     -webkit-transform: 회전(45도) 번역(0) 회전(-45도);   
56.             변형: 회전(45도) 번역(0) 회전(-45도);   
57.   }   
58.   34%, 100% {   
59.     -webkit-transform: 회전(45도) 번역(208px) 회전(-45도);   
60.             변형: 회전(45도) 번역(208px) 회전(-45도);   
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) 전달;   
65.           애니메이션: ani2 2s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 전달;   
66. }  
67. @-webkit-keyframes ani2 {   
68.   0%, 20% {   
69.     -webkit-transform: 회전(90도) 번역(0) 회전(-90도);   
70.             변환: 회전(90도) 번역(0) 회전(-90도);   
71.   }   
72.   34%, 100% {   
73.     -webkit-transform: 회전(90도) 번역(208px) 회전(-90도);   
74.             변형: 회전(90도) 번역(208px) 회전(-90도);   
75.   }   
76. }   
77. @keyframes ani2 {   
78.   0%, 20% {   
79.     -webkit-transform: 회전(90도) 번역(0) 회전(-90도);   
80.             변환: 회전(90도) 번역(0) 회전(-90도);   
81.   }   
82.   34%, 100% {   
83.     -webkit-transform: 회전(90도) 번역(208px) 회전(-90도);   
84.             변형: 회전(90도) 번역(208px) 회전(-90도);   
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) 전달;   
89.           애니메이션: ani3 2s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 전달;   
90. }   
91. @-webkit-keyframes ani3 {   
92.   0%, 20% {   
93.     -webkit-transform: 회전(135도) 번역(0) 회전(-135도);   
94.             변환: 회전(135도) 번역(0) 회전(-135도);   
95.   }   
96.   34%, 100% {   
97.     -webkit-transform: 회전(135도) 번역(208px) 회전(-135도);   
98.             변환: 회전(135도) 번역(208px) 회전(-135도);   
99.   }   
100. }   
101. @keyframes ani3 {   
102.   0%, 20% {   
103.     -webkit-transform: 회전(135도) 번역(0) 회전(-135도);   
104.             변환: 회전(135도) 번역(0) 회전(-135도);   
105.   }  
106.   34%, 100% {   
107.     -webkit-transform: 회전(135도) 번역(208px) 회전(-135도);   
108.             변환: 회전(135도) 번역(208px) 회전(-135도);   
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) 전달;   
113.           애니메이션: ani4 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 전달;   
114. }   
115. @-webkit-keyframes ani4 {   
116.   0%, 20% {   
117.     -webkit-transform: 회전(180deg) 번역(0) 회전(-180deg);   
118.             변환: 회전(180deg) 번역(0) 회전(-180deg);   
119.   }   
120.   34%, 100% {   
121.     -webkit-transform: 회전(180도) 번역(208px) 회전(-180도);   
122.             변형: 회전(180도) 번역(208px) 회전(-180도);   
123.   }   
124. }   
125. @keyframes ani4 {   
126.   0%, 20% {   
127.     -webkit-transform: 회전(180deg) 번역(0) 회전(-180deg);   
128.             변환: 회전(180deg) 번역(0) 회전(-180deg);   
129.   }   
130.   34%, 100% {   
131.     -webkit-transform: 회전(180도) 번역(208px) 회전(-180도);   
132.             변형: 회전(180도) 번역(208px) 회전(-180도);   
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) 전달;   
137.           애니메이션: ani5 2s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 전달;   
138. }   
139. @-webkit-keyframes ani5 {   
140.   0%, 20% {   
141.     -webkit-transform: 회전(225도) 번역(0) 회전(-225도);   
142.             변환: 회전(225deg) 번역(0) 회전(-225deg);   
143.   }  
144.   34%, 100% {   
145.     -webkit-transform: 회전(225도) 번역(208px) 회전(-225도);   
146.             변환: 회전(225도) 번역(208px) 회전(-225도);   
147.   }   
148. }   
149. @keyframes ani5 {   
150.   0%, 20% {   
151.     -webkit-transform: 회전(225도) 번역(0) 회전(-225도);   
152.             변환: 회전(225deg) 번역(0) 회전(-225deg);   
153.   }   
154.   34%, 100% {   
155.     -webkit-transform: 회전(225도) 번역(208px) 회전(-225도);   
156.             변형: 회전(225도) 번역(208px) 회전(-225도);   
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) 전달;   
161.           애니메이션: ani6 2s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 전달;   
162. }   
163. @-webkit-keyframes ani6 {   
164.   0%, 20% {   
165.     -webkit-transform: 회전(270deg) 번역(0) 회전(-270deg);   
166.             변형: 회전(270deg) 번역(0) 회전(-270deg);   
167.   }   
168.   34%, 100% {   
169.     -webkit-transform: 회전(270도) 번역(208px) 회전(-270도);   
170.             변환: 회전(270도) 번역(208px) 회전(-270도);   
171.   }   
172. }   
173. @keyframes ani6 {   
174.   0%, 20% {   
175.     -webkit-transform: 회전(270deg) 번역(0) 회전(-270deg);   
176.             변형: 회전(270deg) 번역(0) 회전(-270deg);   
177.   }   
178.   34%, 100% {   
179.     -webkit-transform: 회전(270도) 번역(208px) 회전(-270도);   
180.             변환: 회전(270도) 번역(208px) 회전(-270도);   
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) 전달;   
185.           애니메이션: ani7 2s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 전달;   
186. }   
187. @-webkit-keyframes ani7 {   
188.   0%, 20% {   
189.     -webkit-transform: 회전(315도) 번역(0) 회전(-315도);   
190.             변환: 회전(315deg) 번역(0) 회전(-315deg);   
191.   }   
192.   34%, 100% {   
193.     -webkit-transform: 회전(315도) 번역(208px) 회전(-315도);   
194.             변형: 회전(315도) 번역(208px) 회전(-315도);   
195.   }   
196. }   
197. @keyframes ani7 {   
198.   0%, 20% {   
199.     -webkit-transform: 회전(315도) 번역(0) 회전(-315도);   
200.             변환: 회전(315도) 번역(0) 회전(-315도);   
201.   }   
202.   34%, 100% {   
203.     -webkit-transform: 회전(315도) 번역(208px) 회전(-315도);   
204.             변형: 회전(315도) 번역(208px) 회전(-315도);   
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) 전달;   
209.           애니메이션: ani8 2s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 전달;   
210. }   
211. @-webkit-keyframes ani8 {   
212.   0%, 20% {   
213.     -webkit-transform: 회전(360도) 번역(0) 회전(-360도);   
214.             변환: 회전(360deg) 번역(0) 회전(-360deg);   
215.   }   
216.   34%, 100% {   
217.     -webkit-transform: 회전(360도) 번역(208px) 회전(-360도);   
218.             변형: 회전(360도) 번역(208px) 회전(-360도);   
219.   }   
220. }  
221. @keyframes ani8 {   
222.   0%, 20% {   
223.     -webkit-transform: 회전(360도) 번역(0) 회전(-360도);   
224.             변환: 회전(360deg) 번역(0) 회전(-360deg);   
225.   }   
226.   34%, 100% {   
227.     -webkit-transform: 회전(360도) 번역(208px) 회전(-360도);   
228.             변형: 회전(360도) 번역(208px) 회전(-360도);   
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.           애니메이션: 바운스 3초 1.8초 입방 베지어(0.175, 0.885, 0.32, 1.275) 앞으로, 색상 변경 1초 1.8초 입방 베지어(0.175, 0.885, 0.32, 1.275) 앞으로;   
234. }   
235. .avatar:nth-of-type(7):이전 {   
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.           애니메이션: 3초 2초 입방베지어(0.175, 0.885, 0.32, 1.275) 앞으로 바운스, 색상 변경 1s 2s 입방베지어(0.175, 0.885, 0.32, 1.275) 앞으로;   
238. }   
239. .avatar:nth-of-type(3):이전 {   
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.           애니메이션: 바운스 3초 2.8초 입방 베지어(0.175, 0.885, 0.32, 1.275) 앞으로, 색 변경 1초 2.8초 입방 베지어(0.175, 0.885, 0.32, 1.275) 앞으로;   
242. }   
243. .avatar:nth-of-type(1):이전 {   
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.           애니메이션: 바운스 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):이전 {   
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.           애니메이션: 바운스 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) 앞으로;   
250. }  
251. .avatar:nth-of-type(5):이전 {   
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.           애니메이션: 바운스 3초 3.8초 입방 베지어(0.175, 0.885, 0.32, 1.275) 앞으로, 색 변경 1초 3.8초 입방 베지어(0.175, 0.885, 0.32, 1.275) 앞으로;   
254. }   
255. .avatar:nth-of-type(8):이전 {   
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.           애니메이션: 3s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 앞으로 바운스, 색상 변경 1s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 앞으로;   
258. }   
259.   
260. .image {   
261.   위치: 절대;   
262.   상단: 0;   
263.   맞아맞아: 0;   
264.   하단하단: 0;   
265.   왼쪽: 0;   
266.   여백: 자동;   
267.   높이: 220px;   
268.   너비: 220px;   
269. }   
270. .image img {   
271.   직위: 친척;   
272.   높이: 220px;   
273.   너비: 220px;   
274.   테두리-반경: 50%;   
275.   z-색인: 1;   
276. }  
277. .image:이전 {   
278.   위치: 절대;   
279.   상단: 0;   
280.   맞아맞아: 0;   
281.   하단하단: 0;   
282.   왼쪽: 0;   
283.   여백: 자동;   
284.   콘텐츠: '';   
285.   높이: 100%;   
286.   너비: 100%;   
287.   배경: #f9fff7;   
288.   테두리: 3px 단색 #e7f5d1;   
289.   테두리-반경: 50%;   
290.   -webkit-animation: 펄스 1초 1.4초 ease-out;   
291.           애니메이션: 펄스 1초 1.4초 ease-out;   
292.   -webkit-animation-iteration-count: 3;   
293.           애니메이션 반복 횟수: 3;   
294. }   
295. .image .smiley {   
296.   위치: 절대;   
297.   상단: -8px;   
298.   맞습니다맞습니다: -8px;   
299.   높이: 64px;   
300.   너비: 64px;   
301.   배경: #b5e763;   
302.   테두리-반경: 50%;   
303.   테두리: 5px 단색 흰색;   
304.   -webkit-animation: 5초 큐빅 베지어(0.175, 0.885, 0.32, 1.275) 앞으로 바운스;   
305.           애니메이션: 5초 큐빅 베지어(0.175, 0.885, 0.32, 1.275) 앞으로 바운스;   
306.   -webkit-transform-origin: center;   
307.       -ms-transform-origin: center;   
308.           변환 원본: center;   
309.   z-색인: 1;   
310. }  
311. .image .smiley svg {   
312.   위치: 절대;   
313.   상단: 0;   
314.   맞아맞아: 0;   
315.   하단하단: 0;   
316.   왼쪽: 0;   
317.   여백: 자동;   
318.   -webkit-animation: 5초 0.075초 cubic-bezier(0.175, 0.885, 0.32, 1.275) 앞으로 바운스;   
319.           애니메이션: 5초 0.075초 입방베지어(0.175, 0.885, 0.32, 1.275) 앞으로 바운스;   
320. }   
321.   
322. @-webkit-keyframes 바운스 {   
323.   0% {   
324.     -webkit-transform: scale(0);   
325.             변환: scale(0);   
326.   }   
327.   5% {   
328.     -webkit-transform: scale(1.5);   
329.             변환: scale(1.5);   
330.   }   
331.   10%, 100% {   
332.     -webkit-transform: scale(1);   
333.             변환: scale(1);   
334.   }   
335. }   
336.   
337. @keyframes 바운스 {   
338.   0% {   
339.     -webkit-transform: scale(0);   
340.             변환: scale(0);   
341.   }   
342.   5% {   
343.     -webkit-transform: scale(1.5);   
344.             변환: scale(1.5);   
345.   }   
346.   10%, 100% {   
347.     -webkit-transform: scale(1);   
348.             변환: scale(1);   
349.   }   
350. }   
351. @-webkit-keyframes 펄스 {   
352.   0% {   
353.     -webkit-transform: scale(0.1, 0.1);   
354.             변환: scale(0.1, 0.1);   
355.     불투명도: 0.0;   
356.   }   
357.   50% {   
358.     불투명도: 1.0;   
359.   }  
360.   100% {   
361.     -webkit-transform: scale(3);   
362.             변환: scale(3);   
363.     불투명도: 0.0;   
364.   }   
365. }   
366. @keyframes 펄스 {   
367.   0% {   
368.     -webkit-transform: scale(0.1, 0.1);   
369.             변환: scale(0.1, 0.1);   
370.     불투명도: 0.0;   
371.   }   
372.   50% {   
373.     불투명도: 1.0;   
374.   }   
375.   100% {   
376.     -webkit-transform: scale(3);   
377.             변환: scale(3);   
378.     불투명도: 0.0;   
379.   }   
380. }   
381. @-webkit-keyframes 색상 변경 {   
382.   0% {   
383.     배경: #bec4bc;   
384.   }   
385.   100% {   
386.     배경: #b5e763;   
387.   }   
388. }   
389. @keyframes 색상 변경 {   
390.   0% {   
391.     배경: #bec4bc;   
392.   }   
393.   100% {   
394.     배경: #b5e763;   
395.   }   
396. }   
397. .avatar:nth-of-type(1) {   
398.   배경 이미지: url("128.jpg" );   
399. }   
400.   
401. .avatar:nth-of-type(2) {   
402.   배경 이미지: url("rasagy.jpg" );   
403. }   
404.   
405. .avatar:nth-of-type(3) {   
406.   배경 이미지: url("geeftvorm.jpg" );   
407. }   
408.   
409. .avatar:nth-of-type(4) {   
410.   배경 이미지: url("VinThomas.jpg" );   
411. }  
412.   
413. .avatar:nth-of-type(5) {   
414.   배경 이미지: url("ladylexy.jpg" );   
415. }   
416.   
417. .avatar:nth-of-type(6) {   
418.   배경 이미지: url("claudioguglieri.jpg" );   
419. }   
420.   
421. .avatar:nth-of-type(7) {   
422.   배경 이미지: url("jina.jpg" );   
423. }   
424.   
425. .avatar:nth-of-type(8) {   
426.   배경 이미지: url("peterme.jpg" );   
427. }  

　　好了以上就是今天介绍的html5와css3动画排列人物头image代码演示, 谢谢阅读, 希望能帮到大家, 请继续关注脚本之家，我们会努力分享更多优秀的文章。