> 웹 프론트엔드 > H5 튜토리얼 > html5 및 css3 animation_html5 튜토리얼 기술을 사용하여 캐릭터 아바타를 배열하는 예제 데모

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

WBOY
풀어 주다: 2016-05-16 15:47:08
원래의
1972명이 탐색했습니다.

오늘은 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代码演示, 谢谢阅读, 希望能帮到大家, 请继续关注脚本之家,我们会努力分享更多优秀的文章。

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿