masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
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
Lepaskan： 2016-05-16 15:47:08
asal
1972 orang telah melayarinya

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动画排列人物头像代码演示,谢谢阅读,希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章.

Label berkaitan：
animasi css3
sumber：php.cn
Artikel sebelumnya：HTML5 menggunakan kanvas untuk melukis kesan teks_html5 kemahiran tutorial Artikel seterusnya：HTML5 menggunakan kanvas untuk melukis kesan sistem suria
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Isu terkini
Penapis ungkapan biasa untuk kotak carian dan kotak semak tindanan MERN Saya cuba memahami cara tindanan MERN berfungsi bersama-sama dengan belajar dengan melakuk...
daripada 2024-04-06 14:53:12
0
1
425
Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
daripada 2024-04-05 12:57:00
0
1
456
Isu pemasangan Prestashop: Tidak dapat memasang modul tersuai Saya baru dalam pembangunan modul Prestashop. Saya cuba membina modul prestashop pertama A...
daripada 2024-04-03 19:24:44
0
1
402
Tutorial PHP: Bagaimana untuk memuat naik teks dan imej ke Linkedin menggunakan PHP? Saya cuba memuat naik teks, imej dan pautan menggunakan LinkedinsRestAPI (https://learn.mi...
daripada 2024-04-03 18:42:29
0
1
420
Tidak dapat menerima maklumat daripada pangkalan data mySQL saya walaupun telah melihat tutorial melakukan perkara yang sama Jadi saya cuba membuat program yang membaca dan menulis ke pangkalan data MySQL, yang memb...
daripada 2024-04-03 14:46:04
0
1
298
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan