社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > 一款利用html5和css3動畫排列人物頭像的實例示範_html5教學技巧

一款利用html5和css3動畫排列人物頭像的實例示範_html5教學技巧

WBOY
發布： 2016-05-16 15:47:08
原創
1972 人瀏覽過

　　今天來跟大家分享一款html5和css3動畫排列人物頭像示範。這款實例頁面初始時，只有中間的美女圖，然後出現微笑圖，緊接著出現小的人物圖，慢慢的以動畫的形式排列到頁面中形成一個圓環。效果圖如下：

　　實作的程式碼。

　　html代碼：

XML/HTML Code複製內容到剪貼簿
  1. div class=class=class=
  2. 類>>           div 類=
  3. '圖像' >               img> >
    4.             
  4. div div  🎜>>  
  5.                 svg"30px"  高度="30px">                      "#effedd " d
  6. ="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. ,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. 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>            div>         div>  
    7.         
  7. 人物 類=
    8. '頭像'
  8. >           
    9. 圖片
  9. > 🎜>>          人物 類=
  10. '頭像' >           
  11. 圖片> 🎜>>          人物 類
    12. =
  12. '頭像' >           
  13. 圖片> 🎜>> 
  14.         人物 類='頭像' >  
  15.         圖片> 🎜>>
  16.           人物 類='頭像' >  
  17.         圖片> 🎜>
    18. >
  18.           人物 類='頭像' >
    19.   
  19.         圖片>
    20.  🎜>
  20. >          人物 類='頭像' >
  21.            圖片>
  22.  🎜>>          人物 類='頭像'
    23. >
  23.            圖片
    24. >
  24.  🎜>>      div
>
  

css3代碼：
CSS 代碼 將內容複製到剪切板
  1. .stage {   
  2.   位置：絕對；  
  3.   上方：0；   
  4.   右右邊：0；   
  5.   底部底部：0；   
  6.   左：0；   
  7.   邊距: 自動;   
  8. ;   ;   ;   ;   
  9. ;   ;   ;   ;
  10.   高度
  11. : 460px
  12. ;     
  13. 寬度: 480px;   ;   
  14. }      
  15. .頭像{      位置
  16. ：絕對；  
    17.   
  17. 上方：0；   
    18.   
  18. 右右邊：0；      
    19. 底部
  19. 底部：0；      左
    20. ：0；   
  20.   邊距: 自動
    21. ;   
  21. ;   ;   ;   
    22. ;   
  22. ;   ;   ;   
    23. ;
  23.   高度: 
    24. 64px
  24. ;   ;   
  25.   寬度: 
    26. 64px
  26. ;   ;   
  27.   背景重複：無重複；   ；      背景-尺寸：封面;   ：封面;      邊框-半徑：50%；     -webkit-transform-origin: center;          -ms-transform-origin: 中心;              轉換原點： 中心；    }  
  28. .avatar:之前 {   
  29.   內容: '';   
  30. ;      位置：
    31. 絕對
  31. ；     
  32. 上方： -8%；      右
  33. 右：-8%；     高度：17。
  34. 06667px；      寬度：17。
  35. 06667px；      背景: 
  36. #bec4bc;   
    37.   
  37. 邊框-半徑：50%；     邊框：3px 3px
    38.  
  38. 🎜>白色
    39. ;   
    40. }   
    41. .avatar:nth-of-type(1) {   
    42.   -webkit-animation：ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 轉寄；
  42.           動畫：ani1 2s 0.1s 三次的貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前>
    43. }   
    44. @-webkit-keyframes ani1 {   
    45.   0%, 20% {   
    46.     -webkit-transform：旋轉（45 度）翻譯（0）旋轉（-45 度）；   
    47.             轉換： 旋轉（45deg） 平移（0） 旋轉（-45deg）；  
  47. 旋轉（-45deg)；  
  48.   }   
  49.   34%, 100% {        -webkit-transform: 旋轉(45deg) 翻譯(
    50. 208px
  50. ) 轉 (-45deg)  >             轉換： 旋轉（45deg） 平移（208px
    51. ） 
  51.   }   
  52. }   
  53. @keyframes ani1 {   
  54.   0%, 20% {   
  55.     -webkit-transform：旋轉（45 度）翻譯（0）旋轉（-45 度）；   
  56.             轉換： 旋轉（45deg） 平移（0） 旋轉（-45deg）；  
    57. 旋轉（-45deg）；  
    58.   }   
    59.   34%, 100% {   
  59.     -webkit-transform: 旋轉(45deg) 翻譯(208px
    60. ) 轉 (-45deg)  >
  60.             轉換：旋轉（45deg）平移（208px)旋轉（-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) 轉寄；
  64.           動畫：ani2 2s 0.2s 三次的貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前>
    65. }  
  65. @-webkit-keyframes ani2 {   
  66.   0%, 20% {   
  67.     -webkit-transform：旋轉（90 度）翻譯（0）旋轉（-90 度）；   
  68.             轉換：旋轉（90度）平移（0）旋轉（-90度）；  
  69.   }   
  70.   34%, 100% {   
  71.     -webkit-transform: 旋轉(90deg) 翻譯(208px) 轉 (-90deg)  >
    72.             轉換：旋轉(90deg) 平移(
  72. 208px) 旋   }   
  73. }   
  74. @keyframes ani2 {   
  75.   0%, 20% {   
  76.     -webkit-transform：旋轉（90 度）翻譯（0）旋轉（-90 度）；   
  77.             轉換：旋轉（90度）平移（0）旋轉（-90度）；  
  78.   }   
  79.   34%, 100% {   
  80.     -webkit-transform: 旋轉(90deg) 翻譯(
    81. 208px
  81. ) 轉 (-90deg)  >             轉換：旋轉(90deg) 平移(208px
    82. ) 旋
  82.   }    }   
  83. .avatar:nth-of-type(3) {   
  84.   -webkit-animation：ani3 2s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 轉寄；
    85.           動畫：ani3 2s 0.3s 三次的貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前>
  85. }   
  86. @-webkit-keyframes ani3 {   
  87.   0%, 20% {   
  88.     -webkit-transform：旋轉（135度）翻譯（0）旋轉（-135度）；   
  89.             轉換： 旋轉（135deg） 平移（0） 旋轉（-135deg）；  
  90.   }   
  91.   34%, 100% {   
  92.     -webkit-transform: 旋轉(135deg) 翻譯(
    93. 208px
  93. ) 旋
    94.             轉換：旋轉(135deg) 平移(
  94. 208px
    95. ) .
  95.   }    }   
  96. @keyframes ani3 {      0%, 20% {   
  97.     -webkit-transform：旋轉（135度）翻譯（0）旋轉（-135度）；   
  98.             轉換： 旋轉（135deg） 平移（0） 旋轉（-135deg）；  
  99.   }  
  100.   34%, 100% {   
  101.     -webkit-transform: 旋轉(135deg) 翻譯(208px) 旋
    102.             轉換：旋轉(135deg) 平移(
  102. 208px) .   }   
  103. }   
  104. .avatar:nth-of-type(4) {   
  105.   -webkit-animation：ani4 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 轉寄；
    106.           動畫：ani4 2s 0.4s 三次的貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前>
  106. }   
  107. @-webkit-keyframes ani4 {   
  108.   0%, 20% {   
  109.     -webkit-transform：旋轉（180度）平移（0）旋轉（-180度）；  
  110.             轉換： 旋轉（180deg） 平移（0） 旋轉（-180deg）；  
  111.   }   
  112.   34%, 100% {   
  113.     -webkit-transform：旋轉（180deg）翻譯（
    114. 208px
  114. ）旋轉（-180deg）；   
    115. ）旋轉（-180deg）；   
  115.             轉換：旋轉(180deg) 平移(208px
    116. ) .
  116.   }    }   
  117. @keyframes ani4 {   
  118.   0%, 20% {   
  119.     -webkit-transform：旋轉（180度）平移（0）旋轉（-180度）；  
  120.             轉換：旋轉（180deg）平移（0）旋轉（-180deg）；  
  121.   }   
  122.   34%, 100% {   
  123.     -webkit-transform：旋轉（180deg）翻譯（
    124. 208px
  124. ）旋轉（-180deg）；   
    125. ）旋轉（-180deg）；   
  125.             轉換：旋轉(180deg) 平移(208px
    126. ) .
  126.   }    }   
  127. .avatar:nth-of-type(5) {   
  128.   -webkit-animation：ani5 2s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 轉寄；
    129.           動畫：ani5 2s 0.5s 三次的貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 前>
  129. }   
  130. @-webkit-keyframes ani5 {   
  131.   0%, 20% {   
  132.     -webkit-transform：旋轉（225 度）翻譯（0）旋轉（-225 度）；   
  133.             轉換： 旋轉（225deg） 平移（0） 旋轉（-225deg）；  
    134. 旋轉（-225deg）；  
    135.   }  
  135.   34%, 100% {   
  136.     -webkit-transform：旋轉（225deg）翻譯（208px）旋轉（-225deg）；   
    137. ）旋轉（-225deg）；   
  137.             轉換：旋轉(225deg) 平移(208px
    138. ) .
  138.   }   
  139. }   
  140. @keyframes ani5 {   
  141.   0%, 20% {   
  142.     -webkit-transform：旋轉（225 度）翻譯（0）旋轉（-225 度）；   
  143.             轉換： 旋轉（225deg） 平移（0） 旋轉（-225deg）；  
    144. 旋轉（-225deg）；  
    145.   }   
    146.   34%, 100% {   
  146.     -webkit-transform：旋轉（225deg）翻譯（208px
    147. ）旋轉（-225deg）；   
  147. ）旋轉（-225deg）；                轉換： 旋轉（225deg） 平移（
    148. 208px
  148. ） 
    149.   }   
    150. }   
    151. .avatar:nth-of-type(6) {   
    152.   -webkit-animation：ani6 2s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 轉寄；
  152.           動畫：ani6 2s 0.6s 三次的貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前>
    153. }   
    154. @-webkit-keyframes ani6 {   
    155.   0%, 20% {   
    156.     -webkit-transform：旋轉（270度）翻譯（0）旋轉（-270度）；   
    157.             轉換： 旋轉（270deg） 平移（0） 旋轉（-270deg）；  
    158.   }   
    159.   34%, 100% {   
    160.     -webkit-transform：旋轉（270deg）翻譯（
  160. 208px）旋轉（-270deg）；   ）旋轉（-270deg）；   
  161.             轉換：旋轉（270deg）平移（208px）旋轉（-270deg）；
    162.   }   
    163. }   
    164. @keyframes ani6 {   
    165.   0%, 20% {   
    166.     -webkit-transform：旋轉（270度）翻譯（0）旋轉（-270度）；   
    167.             轉換： 旋轉（270deg） 平移（0） 旋轉（-270deg）；  
    168.   }   
    169.   34%, 100% {   
    170.     -webkit-transform：旋轉（270deg）翻譯（
  170. 208px）旋轉（-270deg）；   ）旋轉（-270deg）；   
  171.             轉換：旋轉（270deg）平移（208px）旋轉（-270deg）；
    172.   }   
    173. }  
  173. .avatar:nth-of-type(7) {   
  174.   -webkit-animation：ani7 2s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 轉寄；
    175.           動畫：ani7 2s 0.7s 三次的貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前>
  175. }   
  176. @-webkit-keyframes ani7 {   
  177.   0%, 20% {   
  178.     -webkit-transform：旋轉（315度）翻譯（0）旋轉（-315度）；   
  179.             轉換： 旋轉（315deg） 平移（0） 旋轉（-315deg）；  
  180.   }   
  181.   34%, 100% {   
  182.     -webkit-transform：旋轉（315deg）翻譯（
    183. 208px
  183. ）旋轉（-315deg）；   ）旋轉（-315deg）；   
    184.             轉換：旋轉(315deg) 平移(
  184. 208px) .   }   
  185. }   
  186. @keyframes ani7 {   
  187.   0%, 20% {   
  188.     -webkit-transform：旋轉（315度）翻譯（0）旋轉（-315度）；   
  189.             轉換： 旋轉（315deg） 平移（0） 旋轉（-315deg）；  
  190.   }   
  191.   34%, 100% {   
  192.     -webkit-transform: 旋轉(315deg) 翻譯(
    193. 208px
  193. ) 旋             轉換：旋轉(315deg) 平移(208px
    194. ) .
  194.   }    }   
  195. .avatar:nth-of-type(8) {   
  196.   -webkit-animation：ani8 2s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 轉寄；
    197.           動畫：ani8 2s 0.8s 三次的貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 前>
  197. }   
  198. @-webkit-keyframes ani8 {   
  199.   0%, 20% {   
  200.     -webkit-transform：旋轉（360 度）平移（0）旋轉（-360 度）；   
  201.             轉換：旋轉（360deg）平移（0）旋轉（-360deg）；  
  202.   }   
  203.   34%, 100% {   
  204.     -webkit-transform：旋轉(360deg) 翻譯(
    205. 208px
  205. ) 旋轉(-360deg)  
    206.             轉換：旋轉(360deg) 平移(
  206. 208px
    207. ) .
  207.   }    }  
  208. @keyframes ani8 {   
  209.   0%, 20% {   
  210.     -webkit-transform：旋轉（360 度）平移（0）旋轉（-360 度）；   
  211.             轉換：旋轉（360deg）平移（0）旋轉（-360deg）；  
  212.   }   
  213.   34%, 100% {   
  214.     -webkit-transform：旋轉(360deg) 翻譯(208px) 旋轉(-360deg)  
    215.             轉換：旋轉(360deg) 平移(
  215. 208px) .   }   
  216. }   
  217. .avatar:nth-of-type(4):之前, .avatar:nth-of-type(2):之前 {   
  218.   -webkit-animation：彈跳3s 1.8s 三次貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前，顏色變化1s 1.8s 三次貝塞爾曲線(0.175, 0.83, 0. ) 向前；   
  219.           動畫：彈跳3s 1.8s 三次貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前，第85, 0.885, 0.32, 1.275) 向前，顏色變化1s 1.8s 17538595,038385,00383858385. s;   
  220. }   
  221. .avatar:nth-of-type(7):before {   
  222.   -webkit-animation：彈跳3s 2s 三次貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前，顏色變化1s 2s 三次貝塞爾曲線(0.175, 0.85, 1.前；   
  223.           動畫：向前彈跳3s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 前變色185, .32, 1.275) 向前；   
  224. }   
  225. .avatar:nth-of-type(3):before {   
  226.   -webkit-animation：彈跳3s 2.8s 三次貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前，colorchange 1s 2.8s 三次貝塞爾曲線(0.175, 0.32, 0.向前；   
  227.           動畫：彈跳3s 2.8s 三次貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前，第85, 0.885, 0.32, 1.275) 向前，顏色變化1s 2.8s 1758385,750385,03838385. s;   
  228. }   
  229. .avatar:nth-of-type(1):before {   
  230.   -webkit-animation：彈跳3s 3s 三次貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前，顏色變化1s 3s 三次貝塞爾曲線(0.175, 0.85, 1.前；   
  231.           動畫：向前彈跳3s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 向前變色1885, 0.32, 1.275) 向前變色185. .32, 1.275) 向前；   
  232. }   
  233. .avatar:nth-of-type(6):before {   
  234.   -webkit-animation：彈跳3s 3.2s 三次貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前，顏色變化1s 3.2s 三次貝塞爾曲線(0.175, 0.83, 0. ) 向前；   
  235.           動畫：彈跳3s 3.2s 三次貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前，第85, 0.885, 0.32, 1.275) 向前，顏色變化1s 3.20 1758385,75038385,003838385. s;   
  236. }  
  237. .avatar:nth-of-type(5):before {   
  238.   -webkit-animation：彈跳3s 3.8s 三次貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前，colorchange 1s 3.8s 三次貝塞爾曲線(0.175, 0.32, 0.35, 0.向前；   
  239.           動畫：彈跳3s 3.8s 三次貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前，第85, 0.885, 0.32, 1.275) 向前，顏色變化1s 3.8s 1758385,750385,0038385098385. s;   
  240. }   
  241. .avatar:nth-of-type(8):before {   
  242.   -webkit-animation：彈跳3s 4s 三次貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前，顏色變化1s 4s 三次貝塞爾曲線(0.175, 0.85, 1.前；   
  243.           動畫：向前彈跳3s 4s 三次貝塞爾曲線(0.175, 0.885, 0.32, 1.275) 向前變色1s 4s 三次貝塞爾曲線20.17
  244. }   
  245.   
  246. .image {   
  247.   位置：絕對；  
  248.   上方：0；   
  249.   右右邊：0；   
  250.   底部底部：0；   
  251.   左：0；   
  252.   邊距: 自動;   
  253. ;   ;   ;   ;   
  254. ;   ;   ;   ;
  255.   高度
  256. : 220px
  257. ;   ;      寬度
  258. : 220px;   ;   
  259. }    .image img {      職位
  260. ：親；  
  261. ；      
    262. 高度
  262. : 220px;   ;      寬度: 220px;   ;      邊框-半徑：50%；     z 索引：1；    }  
  263. .image:之前 {   
  264.   位置：絕對；  
  265.   上方：0；   
  266.   右右邊：0；   
  267.   底部底部：0；   
  268.   左：0；   
  269.   邊距: 自動;   
  270. ;   ;   ;   ;   
  271. ;   ;   
    272. ;   
  272. ;   內容
  273. : '';   ;   
  274.   高度：100%；      寬度：100%；      背景
  275. : #f9fff7;     
  276. 邊框：
  277. 3px 
  278. 3px 
  279. 🎜>#e7f5d1;   
  280.   
  281. 邊框-半徑：50%；  
  282. -webkit-animation：脈衝 1 秒 1.4 秒緩出；              動畫：脈衝 1 秒 1.4 秒緩出；      -webkit-animation-iteration-count：3；  
  283.           動畫迭代計數：3；    }    .image .smiley {   
  284.   位置：絕對；  
  285.   頂部: -8px;   8px
  286. ;      右右邊
    287. : -
  287. 8px   高度: 
  288. 64px;   ;   
  289.   寬度: 64px;   ;      
  290. 背景: 
  291. #b5e763; 🎜>#b5e763
  292. ; 🎠  邊框
    293. -半徑：50%；  
  293.   邊框
    294. ：
  294. 5px 5px
    295.  
  295. 🎜>白色;   
    296.   -webkit-animation：向前彈跳 5 秒三次貝塞爾曲線（0.175、0.885、0.32、1.275）；  
  296.           動畫：向前彈跳 5 秒三次貝塞爾曲線(0.175, 0.885, 0.32, 1.275)；     -webkit-transform-origin: center;          -ms-transform-origin: 中心;              轉換原點： 中心；      z 索引：1；    }  
  297. .image .smiley svg {   
  298.   位置：絕對；  
  299.   上方：0；   
  300.   右右邊：0；   
  301.   底部底部：0；   
  302.   左：0；   
  303.   邊距: 自動;   
  304. ;   
  305. ;   
    306. ;   
  306. ;   
  307. ;   
  308. ;   
    309. ;   
  309. ;
  310.   -webkit-animation：向前彈跳 5 秒 0.075 秒三次貝塞爾曲線（0.175、0.885、0.32、1.275）；  
  311.           動畫：向前彈跳 5 秒 0.075 秒三次貝塞爾曲線(0.175, 0.885, 0.32, 1.275)； }   
  312.   
  313. @-webkit-keyframes 反彈 {   
  314.   0% {   
  315.     -webkit-transform: scale(0);   
  316.             轉換：縮放（0）；  
  317.   }   
  318.   5% {   
  319.     -webkit-transform: scale(1.5);   
  320.             轉換：縮放（1.5）；  
  321.   }   
  322.   10%, 100% {   
  323.     -webkit-transform: scale(1);   
  324.             轉換：縮放（1）；  
  325.   }   
  326. }   
  327.   
  328. @keyframes 反彈 {   
  329.   0% {   
  330.     -webkit-transform: scale(0);   
  331.             轉換：縮放（0）；  
  332.   }   
  333.   5% {   
  334.     -webkit-transform: scale(1.5);   
  335.             轉換：縮放（1.5）；  
  336.   }   
  337.   10%, 100% {   
  338.     -webkit-transform: scale(1);   
  339.             轉換：縮放（1）；  
  340.   }   
  341. }   
  342. @-webkit-keyframes 脈衝 {   
  343.   0% {   
  344.     -webkit-transform: scale(0.1, 0.1);   
  345.             轉換：縮放（0.1，0.1）；       不透明度：0.0；      }      50% {        不透明度：1.0；      }  
  346.   100% {   
  347.     -webkit-transform: scale(3);   
  348.             轉換：縮放（3）；  
  349.     不透明度：0.0；   
  350.   }   
  351. }   
  352. @keyframes 脈衝{   
  353.   0% {   
  354.     -webkit-transform: scale(0.1, 0.1);   
  355.             轉換：縮放（0.1，0.1）；  
  356.     不透明度：0.0；   
  357.   }   
  358.   50% {   
  359.     不透明度：1.0；   
  360.   }   
  361.   100% {   
  362.     -webkit-transform: scale(3);   
  363.             轉換：縮放（3）；  
  364.     不透明度：0.0；   
  365.   }   
  366. }   
  367. @-webkit-keyframes colorchange {   
  368.   0% {   
  369.     背景: #bec4bc;   
  370.   }   
  371.   100% {   
  372.     背景: #b5e763;   >;   
    373.   }   
    374. }   
    375. @keyframes colorchange {   
    376.   0% {   
    377.     
  377. 背景: #bec4bc;   
    378.   }   
    379.   100% {   
    380.     
  380. 背景: #b5e763;   >;      }   
  381. }   
  382. .avatar:nth-of-type(1) {   
  383.   
    384. 背景圖片
  384. : url(url(url(
    385. "1）；   
    386. }   
    387.   
    388. .avatar:nth-of-type(2) {   
  388.   背景圖片: url(url
    389. (
  389. url
    390. (
  390. " 🎜>）；   
  391. }   
  392.    .avatar:nth-of-type(3) {      背景圖片: 
    393. url
  393. (
    394. url
  394. (
    395. url
  395. (
    396. "ge 🎜>）；   
  396. }       .avatar:nth-of-type(4) {   
    397.   
  397. 背景圖片: url(url(url("VinThomas.jpg" 🎜>）；    }  
  398.   
  399. .avatar:nth-of-type(5) {   
  400.   背景圖片: url(url(
    401. url
  401. (
    402. "ladylex.jpg 🎜>）；   
    403. }   
    404.   
  404. .avatar:nth-of-type(6) {      背景圖片: url
    405. (
  405. url
    406. (
  406. url
    407. (
  407. "claud""eri. 🎜>）；   
  408. }       .avatar:nth-of-type(7) {      背景圖片
  409. : url
  410. (url
  411. (url
  412. ("jina.jpg""jina.jpg" 🎜>）；    }   
    413.   
    414. .avatar:nth-of-type(8) {   

  

背景圖片: url(url(url("peterme.jpg" 🎜>）；    }   好了以上就是今天介紹的html5和css3動畫排列了人物頭像代碼演示，謝謝閱讀，希望能幫助到大家，請繼續關注腳本之家，我們會努力分享更多優秀的文章。
相關標籤：
css3動畫
來源：php.cn
上一篇：html5使用canvas繪製文字特效_html5教學技巧 下一篇：html5使用canvas繪製太陽系效果
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
MERN stack搜尋方塊和複選框的正規表示式篩選器 我正在嘗試透過邊做邊學來了解MERN堆疊如何協同工作，並且我正在遵循bezcoder的這些教程：Node.js/Express/MongoDb（Github整個程式碼）和React...
來自於 2024-04-06 14:53:12
0
1
425
PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
來自於 2024-04-05 12:57:00
0
1
456
Prestashop安裝問題：無法安裝自訂模組 我是Prestashop模組開發的新手。我正在嘗試建立艾米的第一個prestashop模組[參考：這是我的程式碼。我按照該教程中的說明進行了所有操作https://devdocs....
來自於 2024-04-03 19:24:44
0
1
402
PHP教學：如何使用PHP將文字與圖片上傳到Linkedin？ 我嘗試使用LinkedinsRestAPI上傳文字、圖像和連結(https://learn.microsoft.com/en-us/linkedin/consumer/integr...
來自於 2024-04-03 18:42:29
0
1
420
無法從我的 mySQL 資料庫接收訊息，儘管已經看到教程做了完全相同的事情 所以我正在嘗試製作一個讀取和寫入MySQL資料庫的程序，這讓我找到了YouTube教學。我的問題是，儘管經歷了與教程中的人完全相同的過程，但我最終得到了一個空伺服器，儘管應該彈出什...
來自於 2024-04-03 14:46:04
0
1
298
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板