cari

Rumah >hujung hadapan web >Tutorial H5 >Contoh demonstrasi menyusun avatar watak menggunakan kemahiran tutorial html5 dan css3 animation_html5

Contoh demonstrasi menyusun avatar watak menggunakan kemahiran tutorial html5 dan css3 animation_html5

WBOY
WBOYasal
2016-05-16 15:47:081977semak imbas

Hari ini saya ingin berkongsi dengan anda demonstrasi menyusun avatar aksara dalam animasi HTML5 dan CSS3. Pada permulaan halaman contoh ini, hanya terdapat gambar gadis cantik di tengah, kemudian muncul gambar tersenyum, diikuti dengan gambar watak kecil, yang disusun secara perlahan dalam bentuk animasi untuk membentuk bulatan pada halaman tersebut. Paparannya adalah seperti berikut:

Kod pelaksanaan.

　kod html:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <div kelas='pentas' >  
  2.         <div kelas='imej' >  
  3.              <img src=">>  
  4.              <div kelas='miley'>' >  
  5.                 <svg lebar<🎜">=0px🎜>><  tinggi="30px">                       
    6. <
  6. laluan isi">">laluan isi">">
     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" />
    7. svg
  7. >                
    8. div
  8. >           
    9. div
  9. >           <tokoh kelas=
    10. 'avatar'
  10. >           
    11. angka
  11. >           <tokoh kelas=
    12. 'avatar'
  12. >           
    13. angka
  13. >           <tokoh kelas=
    14. 'avatar'
  14. >           
    15. angka<🎜><🎜>>  
  15.         <tokoh kelas='avatar' >  
  16.         angka>  
  17.         <tokoh kelas='avatar' >  
  18.         angka>  
  19.         <tokoh kelas='avatar' >  
  20.         angka>  
  21.         <tokoh kelas='avatar' >  
  22.         angka>  
  23.         <tokoh kelas='avatar' >  
  24.         angka>  
  25.     div>  

　　css3代码：

Kod CSS复制内容到剪贴板
  1. .pentas {   
  2.   kedudukan: mutlak;   
  3.   atas: 0;   
  4.   kanankanan: 0;   
  5.   bawahbawah: 0;   
  6.   kiri: 0;   
  7.   margin: auto;   
  8.   tinggi: 460px;   
  9.   lebar: 480px;   
  10. }   
  11.   
  12. .avatar {   
  13.   kedudukan: mutlak;   
  14.   atas: 0;   
  15.   kanankanan: 0;   
  16.   bawahbawah: 0;   
  17.   kiri: 0;   
  18.   margin: auto;   
  19.   tinggi: 64px;   
  20.   lebar: 64px;   
  21.   latar belakang-ulang: tiada ulangan;   
  22.   latar belakang-saiz: kulit;   
  23.   sempadan-jejari: 50%;   
  24.   -webkit-transform-origin: tengah;   
  25.       -ms-transform-origin: tengah;   
  26.           transform-origin: center;   
  27. }  
  28. .avatar:sebelum {   
  29.   kandungan: '';   
  30.   kedudukan: mutlak;   
  31.   atas: -8%;   
  32.   kanankanan: -8%;   
  33.   tinggi: 17.06667px;   
  34.   lebar: 17.06667px;   
  35.   latar belakang: #bec4bc;   
  36.   sempadan-jejari: 50%;   
  37.   sempadan: 3px pepejal putih;   
  38. }   
  39. .avatar:nth-of-type(1) {   
  40.   -webkit-animasi: ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  41.           animasi: ani1 2s 0.1s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan;   
  42. }   
  43. @-webkit-keyframes ani1 {   
  44.   0%, 20% {   
  45.     -webkit-transform: putar(45deg) terjemah(0) putar(-45deg);   
  46.             transformasi: putar(45deg) terjemah(0) putar(-45deg);   
  47.   }   
  48.   34%, 100% {   
  49.     -webkit-transform: putar(45deg) terjemah(208px) putar(-45deg);   
  50.             transformasi: putar(45deg) terjemah(208px) putar(-45deg);   
  51.   }   
  52. }   
  53. @keyframes ani1 {   
  54.   0%, 20% {   
  55.     -webkit-transform: putar(45deg) terjemah(0) putar(-45deg);   
  56.             transformasi: putar(45deg) terjemah(0) putar(-45deg);   
  57.   }   
  58.   34%, 100% {   
  59.     -webkit-transform: putar(45deg) terjemah(208px) putar(-45deg);   
  60.             transformasi: putar(45deg) terjemah(208px) putar(-45deg);   
  61.   }   
  62. }   
  63. .avatar:nth-of-type(2) {   
  64.   -webkit-animasi: ani2 2s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  65.           animasi: ani2 2s 0.2s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan;   
  66. }  
  67. @-webkit-keyframes ani2 {   
  68.   0%, 20% {   
  69.     -webkit-transform: putar(90deg) terjemah(0) putar(-90deg);   
  70.             transformasi: putar(90deg) terjemah(0) putar(-90deg);   
  71.   }   
  72.   34%, 100% {   
  73.     -webkit-transform: putar(90deg) terjemah(208px) putar(-90deg);   
  74.             transformasi: putar(90deg) terjemah(208px) putar(-90deg);   
  75.   }   
  76. }   
  77. @keyframes ani2 {   
  78.   0%, 20% {   
  79.     -webkit-transform: putar(90deg) terjemah(0) putar(-90deg);   
  80.             transformasi: putar(90deg) terjemah(0) putar(-90deg);   
  81.   }   
  82.   34%, 100% {   
  83.     -webkit-transform: putar(90deg) terjemah(208px) putar(-90deg);   
  84.             transformasi: putar(90deg) terjemah(208px) putar(-90deg);   
  85.   }   
  86. }   
  87. .avatar:nth-of-type(3) {   
  88.   -webkit-animasi: ani3 2s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  89.           animasi: ani3 2s 0.3s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan;   
  90. }   
  91. @-webkit-keyframes ani3 {   
  92.   0%, 20% {   
  93.     -webkit-transform: putar(135deg) terjemah(0) putar(-135deg);   
  94.             transformasi: putar(135deg) terjemah(0) putar(-135deg);   
  95.   }   
  96.   34%, 100% {   
  97.     -webkit-transform: putar(135deg) terjemah(208px) putar(-135deg);   
  98.             transformasi: putar(135deg) terjemah(208px) putar(-135deg);   
  99.   }   
  100. }   
  101. @keyframes ani3 {   
  102.   0%, 20% {   
  103.     -webkit-transform: putar(135deg) terjemah(0) putar(-135deg);   
  104.             transformasi: putar(135deg) terjemah(0) putar(-135deg);   
  105.   }  
  106.   34%, 100% {   
  107.     -webkit-transform: putar(135deg) terjemah(208px) putar(-135deg);   
  108.             transformasi: putar(135deg) terjemah(208px) putar(-135deg);   
  109.   }   
  110. }   
  111. .avatar:nth-of-type(4) {   
  112.   -webkit-animasi: ani4 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  113.           animasi: ani4 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) depan;   
  114. }   
  115. @-webkit-keyframes ani4 {   
  116.   0%, 20% {   
  117.     -webkit-transform: putar(180deg) terjemah(0) putar(-180deg);   
  118.             transformasi: putar(180deg) terjemah(0) putar(-180deg);   
  119.   }   
  120.   34%, 100% {   
  121.     -webkit-transform: putar(180deg) terjemah(208px) putar(-180deg);   
  122.             transformasi: putar(180deg) terjemah(208px) putar(-180deg);   
  123.   }   
  124. }   
  125. @keyframes ani4 {   
  126.   0%, 20% {   
  127.     -webkit-transform: putar(180deg) terjemah(0) putar(-180deg);   
  128.             transformasi: putar(180deg) terjemah(0) putar(-180deg);   
  129.   }   
  130.   34%, 100% {   
  131.     -webkit-transform: putar(180deg) terjemah(208px) putar(-180deg);   
  132.             transformasi: putar(180deg) terjemah(208px) putar(-180deg);   
  133.   }   
  134. }   
  135. .avatar:nth-of-type(5) {   
  136.   -webkit-animasi: ani5 2s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  137.           animasi: ani5 2s 0.5s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan;   
  138. }   
  139. @-webkit-keyframes ani5 {   
  140.   0%, 20% {   
  141.     -webkit-transform: putar(225deg) terjemah(0) putar(-225deg);   
  142.             transformasi: putar(225deg) terjemah(0) putar(-225deg);   
  143.   }  
  144.   34%, 100% {   
  145.     -webkit-transform: putar(225deg) terjemah(208px) putar(-225deg);   
  146.             transformasi: putar(225deg) terjemah(208px) putar(-225deg);   
  147.   }   
  148. }   
  149. @keyframes ani5 {   
  150.   0%, 20% {   
  151.     -webkit-transform: putar(225deg) terjemah(0) putar(-225deg);   
  152.             transformasi: putar(225deg) terjemah(0) putar(-225deg);   
  153.   }   
  154.   34%, 100% {   
  155.     -webkit-transform: putar(225deg) terjemah(208px) putar(-225deg);   
  156.             transformasi: putar(225deg) terjemah(208px) putar(-225deg);   
  157.   }   
  158. }   
  159. .avatar:nth-of-type(6) {   
  160.   -webkit-animasi: ani6 2s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  161.           animasi: ani6 2s 0.6s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan;   
  162. }   
  163. @-webkit-keyframes ani6 {   
  164.   0%, 20% {   
  165.     -webkit-transform: putar(270deg) terjemah(0) putar(-270deg);   
  166.             transformasi: putar(270deg) terjemah(0) putar(-270deg);   
  167.   }   
  168.   34%, 100% {   
  169.     -webkit-transform: putar(270deg) terjemah(208px) putar(-270deg);   
  170.             transformasi: putar(270deg) terjemah(208px) putar(-270deg);   
  171.   }   
  172. }   
  173. @keyframes ani6 {   
  174.   0%, 20% {   
  175.     -webkit-transform: putar(270deg) terjemah(0) putar(-270deg);   
  176.             transformasi: putar(270deg) terjemah(0) putar(-270deg);   
  177.   }   
  178.   34%, 100% {   
  179.     -webkit-transform: putar(270deg) terjemah(208px) putar(-270deg);   
  180.             transformasi: putar(270deg) terjemah(208px) putar(-270deg);   
  181.   }   
  182. }  
  183. .avatar:nth-of-type(7) {   
  184.   -webkit-animasi: ani7 2s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forward;   
  185.           animasi: ani7 2s 0.7s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan;   
  186. }   
  187. @-webkit-keyframes ani7 {   
  188.   0%, 20% {   
  189.     -webkit-transform: putar(315deg) terjemah(0) putar(-315deg);   
  190.             transformasi: putar(315deg) terjemah(0) putar(-315deg);   
  191.   }   
  192.   34%, 100% {   
  193.     -webkit-transform: putar(315deg) terjemah(208px) putar(-315deg);   
  194.             transformasi: putar(315deg) terjemah(208px) putar(-315deg);   
  195.   }   
  196. }   
  197. @keyframes ani7 {   
  198.   0%, 20% {   
  199.     -webkit-transform: putar(315deg) terjemah(0) putar(-315deg);   
  200.             transformasi: putar(315deg) terjemah(0) putar(-315deg);   
  201.   }   
  202.   34%, 100% {   
  203.     -webkit-transform: putar(315deg) terjemah(208px) putar(-315deg);   
  204.             transformasi: putar(315deg) terjemah(208px) putar(-315deg);   
  205.   }   
  206. }   
  207. .avatar:nth-of-type(8) {   
  208.   -webkit-animasi: ani8 2s 0.8s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan;   
  209.           animasi: ani8 2s 0.8s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan;   
  210. }   
  211. @-webkit-keyframes ani8 {   
  212.   0%, 20% {   
  213.     -webkit-transform: putar(360deg) terjemah(0) putar(-360deg);   
  214.             transformasi: putar(360deg) terjemah(0) putar(-360deg);   
  215.   }   
  216.   34%, 100% {   
  217.     -webkit-transform: putar(360deg) terjemah(208px) putar(-360deg);   
  218.             transformasi: putar(360deg) terjemah(208px) putar(-360deg);   
  219.   }   
  220. }  
  221. @keyframes ani8 {   
  222.   0%, 20% {   
  223.     -webkit-transform: putar(360deg) terjemah(0) putar(-360deg);   
  224.             transformasi: putar(360deg) terjemah(0) putar(-360deg);   
  225.   }   
  226.   34%, 100% {   
  227.     -webkit-transform: putar(360deg) terjemah(208px) putar(-360deg);   
  228.             transformasi: putar(360deg) terjemah(208px) putar(-360deg);   
  229.   }   
  230. }   
  231. .avatar:nth-of-type(4):before, .avatar:nth-of-type(2):before {   
  232.   -webkit-animasi: melantun 3s 1.8s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan, tukar warna 1s 1.8s kubik-bezier(0.175, 0.1.8s kubik-bezier(0.835, 0. 0.185; 0.185; 0.185; 0.185; 0.185; 0.185; 0.185; 0.185; 0.185, 0.   
  233.           animasi: melantun 3s 1.8s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan, tukar warna 1s 1.8s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan, perubahan warna 1s 1.8s kubik-bezier, 0.1785; 0.1785; 0.1785;   
  234. }   
  235. .avatar:nth-of-type(7):sebelum {   
  236.   -webkit-animasi: melantun 3s 2s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan, tukar warna 1s 2s kubik-bezier(0.175, 0.275, 0.875, 0.275)   
  237.           animasi: melantun 3s 2s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan, tukar warna 1s 2s kubik-bezier(0.835,  0.885, 0.885, 0.275) ke hadapan   
  238. }   
  239. .avatar:nth-of-type(3):sebelum {   
  240.   -webkit-animasi: melantun 3s 2.8s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan, tukar warna 1s 2.8s kubik-bezier(0.835, 0.8s kubik-bezier(0.835, 0. 0.185, 0.185, 0.185, 0.185; 0.185; 0.185, 0.   
  241.           animasi: melantun 3s 2.8s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan, tukar warna 1s 2.8s kubik-bezier (0.175, 0.885, 0.32, 1.275) ke hadapan, tukar warna 1s 2.8s kubik-bezier, 0.1785, 0.1785; 0.1785;   
  242. }   
  243. .avatar:nth-of-type(1):sebelum {   
  244.   -webkit-animasi: melantun 3s 3s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan, tukar warna 1s 3s kubik-bezier(0.175, 0.275, 0.875, 0.275)   
  245.           animasi: melantun 3s 3s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan, tukar warna 1s 3s kubik-bezier(0.835, 0.175, 0.885, 0.275) ke hadapan   
  246. }   
  247. .avatar:nth-of-type(6):sebelum {   
  248.   -webkit-animasi: melantun 3s 3.2s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan, tukar warna 1s 3.2s kubik-bezier(0.835, 0.185, 0.185, 0.185, 0.185, 0.185, 0.175, 0.   
  249.           animasi: melantun 3s 3.2s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan, tukar warna 1s 3.2s kubik-bezier, 0.1785; 0.1785; 0.1785;   
  250. }  
  251. .avatar:nth-of-type(5):sebelum {   
  252.   -webkit-animasi: melantun 3s 3.8s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan, tukar warna 1s 3.8s kubik-bezier(0.835, 0.88s kubik-bezier(0.825, 0.185, 0.185, 0.175, 0.185, 0.825, 0.825, 0.825, 0.825, 0.825, 0.   
  253.           animasi: melantun 3s 3.8s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan, tukar warna 1s 3.8s kubik-bezier, 0.1785, 0.178s   
  254. }   
  255. .avatar:nth-of-type(8):sebelum {   
  256.   -webkit-animasi: melantun 3s 4s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan, tukar warna 1s 4s kubik-bezier(0.175, 0.275, 0.275)   
  257.           animasi: melantun 3s 4s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan, tukar warna 1s 4s kubik-bezier(0.835, 0.885, 0.275) ke hadapan   
  258. }   
  259.   
  260. .imej {   
  261.   kedudukan: mutlak;   
  262.   atas: 0;   
  263.   kanankanan: 0;   
  264.   bawahbawah: 0;   
  265.   kiri: 0;   
  266.   margin: auto;   
  267.   tinggi: 220px;   
  268.   lebar: 220px;   
  269. }   
  270. .imej img {   
  271.   kedudukan: saudara;   
  272.   tinggi: 220px;   
  273.   lebar: 220px;   
  274.   sempadan-jejari: 50%;   
  275.   z-indeks: 1;   
  276. }  
  277. .imej:sebelum {   
  278.   kedudukan: mutlak;   
  279.   atas: 0;   
  280.   kanankanan: 0;   
  281.   bawahbawah: 0;   
  282.   kiri: 0;   
  283.   margin: auto;   
  284.   kandungan: '';   
  285.   tinggi: 100%;   
  286.   lebar: 100%;   
  287.   latar belakang: #f9fff7;   
  288.   sempadan: 3px pepejal #e7f5d1;   
  289.   sempadan-jejari: 50%;   
  290.   -webkit-animasi: denyutan 1s 1.4s kelonggaran;   
  291.           animasi: denyutan 1s 1.4s ease-out;   
  292.   -webkit-animation-iteration-count: 3;   
  293.           bilangan lelaran-animasi: 3;   
  294. }   
  295. .imej .smiley {   
  296.   kedudukan: mutlak;   
  297.   atas: -8px;   
  298.   kanankanan: -8px;   
  299.   tinggi: 64px;   
  300.   lebar: 64px;   
  301.   latar belakang: #b5e763;   
  302.   sempadan-jejari: 50%;   
  303.   sempadan: 5px pepejal putih;   
  304.   -webkit-animasi: melantun 5s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan;   
  305.           animasi: lantun 5s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan;   
  306.   -webkit-transform-origin: tengah;   
  307.       -ms-transform-origin: tengah;   
  308.           transform-origin: center;   
  309.   z-indeks: 1;   
  310. }  
  311. .image .smiley svg {   
  312.   kedudukan: mutlak;   
  313.   atas: 0;   
  314.   kanankanan: 0;   
  315.   bawahbawah: 0;   
  316.   kiri: 0;   
  317.   margin: auto;   
  318.   -webkit-animasi: melantun 5s 0.075s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan;   
  319.           animasi: melantun 5s 0.075s kubik-bezier(0.175, 0.885, 0.32, 1.275) ke hadapan;   
  320. }   
  321.   
  322. @-webkit-keyframes melantun {   
  323.   0% {   
  324.     -webkit-transform: skala(0);   
  325.             transformasi: skala(0);   
  326.   }   
  327.   5% {   
  328.     -webkit-transform: skala(1.5);   
  329.             transformasi: skala(1.5);   
  330.   }   
  331.   10%, 100% {   
  332.     -webkit-transform: skala(1);   
  333.             transformasi: skala(1);   
  334.   }   
  335. }   
  336.   
  337. @keyframes melantun {   
  338.   0% {   
  339.     -webkit-transform: skala(0);   
  340.             transformasi: skala(0);   
  341.   }   
  342.   5% {   
  343.     -webkit-transform: skala(1.5);   
  344.             transformasi: skala(1.5);   
  345.   }   
  346.   10%, 100% {   
  347.     -webkit-transform: skala(1);   
  348.             transformasi: skala(1);   
  349.   }   
  350. }   
  351. @-webkit-keyframes nadi {   
  352.   0% {   
  353.     -webkit-transform: skala(0.1, 0.1);   
  354.             transformasi: skala(0.1, 0.1);   
  355.     kelegapan: 0.0;   
  356.   }   
  357.   50% {   
  358.     kelegapan: 1.0;   
  359.   }  
  360.   100% {   
  361.     -webkit-transform: skala(3);   
  362.             transformasi: skala(3);   
  363.     kelegapan: 0.0;   
  364.   }   
  365. }   
  366. @keyframes nadi {   
  367.   0% {   
  368.     -webkit-transform: skala(0.1, 0.1);   
  369.             transformasi: skala(0.1, 0.1);   
  370.     kelegapan: 0.0;   
  371.   }   
  372.   50% {   
  373.     kelegapan: 1.0;   
  374.   }   
  375.   100% {   
  376.     -webkit-transform: skala(3);   
  377.             transformasi: skala(3);   
  378.     kelegapan: 0.0;   
  379.   }   
  380. }   
  381. @-webkit-keyframes tukar warna {   
  382.   0% {   
  383.     latar belakang: #bec4bc;   
  384.   }   
  385.   100% {   
  386.     latar belakang: #b5e763;   
  387.   }   
  388. }   
  389. @keyframes perubahan warna {   
  390.   0% {   
  391.     latar belakang: #bec4bc;   
  392.   }   
  393.   100% {   
  394.     latar belakang: #b5e763;   
  395.   }   
  396. }   
  397. .avatar:nth-of-type(1) {   
  398.   imej latar belakang: url("128.jpg" );   
  399. }   
  400.   
  401. .avatar:nth-of-type(2) {   
  402.   imej latar belakang: url("rasagy.jpg" );   
  403. }   
  404.   
  405. .avatar:nth-of-type(3) {   
  406.   imej latar belakang: url("geeftvorm.jpg" );   
  407. }   
  408.   
  409. .avatar:nth-of-type(4) {   
  410.   imej latar belakang: url("VinThomas.jpg" );   
  411. }  
  412.   
  413. .avatar:nth-of-type(5) {   
  414.   Hintergrundbild: URL("ladylexy.jpg" );   
  415. }   
  416.   
  417. .avatar:nth-of-type(6) {   
  418.   Hintergrundbild: URL("claudioguglieri.jpg" );   
  419. }   
  420.   
  421. .avatar:nth-of-type(7) {   
  422.   Hintergrundbild: URL("jina.jpg" );   
  423. }   
  424.   
  425. .avatar:nth-of-type(8) {   
  426.   Hintergrundbild: URL("peterme.jpg" );   
  427. }  

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：HTML5 menggunakan kanvas untuk melukis kesan teks_html5 kemahiran tutorialArtikel seterusnya：HTML5 menggunakan kanvas untuk melukis kesan teks_html5 kemahiran tutorial

Artikel berkaitan

Lihat lagi