suchen

Heim >Web-Frontend >H5-Tutorial >Eine Beispieldemonstration zum Anordnen von Charakter-Avataren mithilfe von HTML5- und CSS3-Animation_html5-Tutorial-Fähigkeiten

Eine Beispieldemonstration zum Anordnen von Charakter-Avataren mithilfe von HTML5- und CSS3-Animation_html5-Tutorial-Fähigkeiten

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 15:47:082043Durchsuche

Heute möchte ich Ihnen eine Demonstration der Anordnung von Charakter-Avataren in HTML5- und CSS3-Animationen zeigen. Am Anfang dieser Beispielseite befindet sich in der Mitte nur ein schönes Mädchenbild, dann erscheint ein lächelndes Bild, gefolgt von kleinen Charakterbildern, die langsam in Form einer Animation zu einem Kreis auf der Seite angeordnet werden. Das Rendering ist wie folgt:

Implementierungscode.

　HTML-Code:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <div class='stage' >  
  2.         <div class='image' >  
  3.             <img src="https: //pbs.twimg.com/profile_images/529224080751202304/UNLt5nUZ_400x400.jpeg">  
  4.             <div class='smiley' >  
  5.                  Höhe="30px">                       " 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"
    6.  
  6. />svg>               div>           div>  
  7.         <Figur Klasse
    8. =
  8. 'Avatar' >           
    9. Abbildung>           <Figur Klasse=
  9. 'Avatar' >           Abbildung>           <Figur Klasse
    10. =
  10. 'Avatar' >           Abbildung>  
  11.         <Figur Klasse='Avatar' >  
  12.         Abbildung>  
  13.         <Figur Klasse='Avatar' >  
  14.         Abbildung>  
  15.         <Figur Klasse='Avatar' >  
  16.         Abbildung>  
  17.         <Figur Klasse='Avatar' >  
  18.         Abbildung>  
  19.         <Figur Klasse='Avatar' >  
  20.         Abbildung>  
  21.     div>  

　　css3代码：

CSS-Code复制内容到剪贴板
  1. .stage {   
  2.   Position: absolut;   
  3.   oben: 0;   
  4.   richtigrichtig: 0;   
  5.   untenunten: 0;   
  6.   links: 0;   
  7.   Marge: automatisch;   
  8.   Höhe: 460px;   
  9.   Breite: 480px;   
  10. }   
  11.   
  12. .avatar {   
  13.   Position: absolut;   
  14.   oben: 0;   
  15.   richtigrichtig: 0;   
  16.   untenunten: 0;   
  17.   links: 0;   
  18.   Marge: automatisch;   
  19.   Höhe: 64px;   
  20.   Breite: 64px;   
  21.   Hintergrundwiederholung: keine Wiederholung;   
  22.   Hintergrund-Größe: Cover;   
  23.   Grenze-Radius: 50 %;   
  24.   -webkit-transform-origin: center;   
  25.       -ms-transform-origin: center;   
  26.           transform-origin: center;   
  27. }  
  28. .avatar:before {   
  29.   Inhalt: '';   
  30.   Position: absolut;   
  31.   oben: -8 %;   
  32.   richtigrichtig: -8 %;   
  33.   Höhe: 17.06667px;   
  34.   Breite: 17.06667px;   
  35.   Hintergrund: #bec4bc;   
  36.   Grenze-Radius: 50 %;   
  37.   Rahmen: 3px durchgehend weiß;   
  38. }   
  39. .avatar:nth-of-type(1) {   
  40.   -webkit-animation: ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts;   
  41.           Animation: ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts;   
  42. }   
  43. @-webkit-keyframes ani1 {   
  44.   0 %, 20 % {   
  45.     -webkit-transform: rotate(45deg) translate(0) rotate(-45deg);   
  46.             transform: rotate(45deg) translate(0) rotate(-45deg);   
  47.   }   
  48.   34 %, 100 % {   
  49.     -webkit-transform: rotate(45deg) translate(208px) rotate(-45deg);   
  50.             transformieren: rotate(45deg) translate(208px) rotate(-45deg);   
  51.   }   
  52. }   
  53. @keyframes ani1 {   
  54.   0 %, 20 % {   
  55.     -webkit-transform: rotate(45deg) translate(0) rotate(-45deg);   
  56.             transform: rotate(45deg) translate(0) rotate(-45deg);   
  57.   }   
  58.   34 %, 100 % {   
  59.     -webkit-transform: rotate(45deg) translate(208px) rotate(-45deg);   
  60.             transformieren: rotate(45deg) translate(208px) rotate(-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) vorwärts;   
  65.           Animation: ani2 2s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts;   
  66. }  
  67. @-webkit-keyframes ani2 {   
  68.   0 %, 20 % {   
  69.     -webkit-transform: rotate(90deg) translate(0) rotate(-90deg);   
  70.             transform: rotate(90deg) translate(0) rotate(-90deg);   
  71.   }   
  72.   34 %, 100 % {   
  73.     -webkit-transform: rotate(90deg) translate(208px) rotate(-90deg);   
  74.             transform: rotate(90deg) translate(208px) rotate(-90deg);   
  75.   }   
  76. }   
  77. @keyframes ani2 {   
  78.   0 %, 20 % {   
  79.     -webkit-transform: rotate(90deg) translate(0) rotate(-90deg);   
  80.             transformieren: rotate(90deg) translate(0) rotate(-90deg);   
  81.   }   
  82.   34 %, 100 % {   
  83.     -webkit-transform: rotate(90deg) translate(208px) rotate(-90deg);   
  84.             transformieren: rotate(90deg) translate(208px) rotate(-90deg);   
  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) vorwärts;   
  89.           Animation: ani3 2s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts;   
  90. }   
  91. @-webkit-keyframes ani3 {   
  92.   0 %, 20 % {   
  93.     -webkit-transform: rotate(135deg) translate(0) rotate(-135deg);   
  94.             transform: rotate(135deg) translate(0) rotate(-135deg);   
  95.   }   
  96.   34 %, 100 % {   
  97.     -webkit-transform: rotate(135deg) translate(208px) rotate(-135deg);   
  98.             transformieren: rotate(135deg) translate(208px) rotate(-135deg);   
  99.   }   
  100. }   
  101. @keyframes ani3 {   
  102.   0 %, 20 % {   
  103.     -webkit-transform: rotate(135deg) translate(0) rotate(-135deg);   
  104.             transform: rotate(135deg) translate(0) rotate(-135deg);   
  105.   }  
  106.   34 %, 100 % {   
  107.     -webkit-transform: rotate(135deg) translate(208px) rotate(-135deg);   
  108.             transformieren: rotate(135deg) translate(208px) rotate(-135deg);   
  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) vorwärts;   
  113.           Animation: ani4 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts;   
  114. }   
  115. @-webkit-keyframes ani4 {   
  116.   0 %, 20 % {   
  117.     -webkit-transform: rotate(180deg) translate(0) rotate(-180deg);   
  118.             transform: rotate(180deg) translate(0) rotate(-180deg);   
  119.   }   
  120.   34 %, 100 % {   
  121.     -webkit-transform: rotate(180deg) translate(208px) rotate(-180deg);   
  122.             transformieren: rotate(180deg) translate(208px) rotate(-180deg);   
  123.   }   
  124. }   
  125. @keyframes ani4 {   
  126.   0 %, 20 % {   
  127.     -webkit-transform: rotate(180deg) translate(0) rotate(-180deg);   
  128.             transform: rotate(180deg) translate(0) rotate(-180deg);   
  129.   }   
  130.   34 %, 100 % {   
  131.     -webkit-transform: rotate(180deg) translate(208px) rotate(-180deg);   
  132.             transformieren: rotate(180deg) translate(208px) rotate(-180deg);   
  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) vorwärts;   
  137.           Animation: ani5 2s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts;   
  138. }   
  139. @-webkit-keyframes ani5 {   
  140.   0 %, 20 % {   
  141.     -webkit-transform: rotate(225deg) translate(0) rotate(-225deg);   
  142.             transform: rotate(225deg) translate(0) rotate(-225deg);   
  143.   }  
  144.   34 %, 100 % {   
  145.     -webkit-transform: rotate(225deg) translate(208px) rotate(-225deg);   
  146.             transform: rotate(225deg) translate(208px) rotate(-225deg);   
  147.   }   
  148. }   
  149. @keyframes ani5 {   
  150.   0 %, 20 % {   
  151.     -webkit-transform: rotate(225deg) translate(0) rotate(-225deg);   
  152.             transform: rotate(225deg) translate(0) rotate(-225deg);   
  153.   }   
  154.   34 %, 100 % {   
  155.     -webkit-transform: rotate(225deg) translate(208px) rotate(-225deg);   
  156.             transform: rotate(225deg) translate(208px) rotate(-225deg);   
  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) vorwärts;   
  161.           Animation: ani6 2s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts;   
  162. }   
  163. @-webkit-keyframes ani6 {   
  164.   0 %, 20 % {   
  165.     -webkit-transform: rotate(270deg) translate(0) rotate(-270deg);   
  166.             transform: rotate(270deg) translate(0) rotate(-270deg);   
  167.   }   
  168.   34 %, 100 % {   
  169.     -webkit-transform: rotate(270deg) translate(208px) rotate(-270deg);   
  170.             transformieren: rotate(270deg) translate(208px) rotate(-270deg);   
  171.   }   
  172. }   
  173. @keyframes ani6 {   
  174.   0 %, 20 % {   
  175.     -webkit-transform: rotate(270deg) translate(0) rotate(-270deg);   
  176.             transform: rotate(270deg) translate(0) rotate(-270deg);   
  177.   }   
  178.   34 %, 100 % {   
  179.     -webkit-transform: rotate(270deg) translate(208px) rotate(-270deg);   
  180.             transformieren: rotate(270deg) translate(208px) rotate(-270deg);   
  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) vorwärts;   
  185.           Animation: ani7 2s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts;   
  186. }   
  187. @-webkit-keyframes ani7 {   
  188.   0 %, 20 % {   
  189.     -webkit-transform: rotate(315deg) translate(0) rotate(-315deg);   
  190.             transform: rotate(315deg) translate(0) rotate(-315deg);   
  191.   }   
  192.   34 %, 100 % {   
  193.     -webkit-transform: rotate(315deg) translate(208px) rotate(-315deg);   
  194.             transform: rotate(315deg) translate(208px) rotate(-315deg);   
  195.   }   
  196. }   
  197. @keyframes ani7 {   
  198.   0 %, 20 % {   
  199.     -webkit-transform: rotate(315deg) translate(0) rotate(-315deg);   
  200.             transform: rotate(315deg) translate(0) rotate(-315deg);   
  201.   }   
  202.   34 %, 100 % {   
  203.     -webkit-transform: rotate(315deg) translate(208px) rotate(-315deg);   
  204.             transform: rotate(315deg) translate(208px) rotate(-315deg);   
  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) vorwärts;   
  209.           Animation: ani8 2s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts;   
  210. }   
  211. @-webkit-keyframes ani8 {   
  212.   0 %, 20 % {   
  213.     -webkit-transform: rotate(360deg) translate(0) rotate(-360deg);   
  214.             transform: rotate(360deg) translate(0) rotate(-360deg);   
  215.   }   
  216.   34 %, 100 % {   
  217.     -webkit-transform: rotate(360deg) translate(208px) rotate(-360deg);   
  218.             transform: rotate(360deg) translate(208px) rotate(-360deg);   
  219.   }   
  220. }  
  221. @keyframes ani8 {   
  222.   0 %, 20 % {   
  223.     -webkit-transform: rotate(360deg) translate(0) rotate(-360deg);   
  224.             transform: rotate(360deg) translate(0) rotate(-360deg);   
  225.   }   
  226.   34 %, 100 % {   
  227.     -webkit-transform: rotate(360deg) translate(208px) rotate(-360deg);   
  228.             transform: rotate(360deg) translate(208px) rotate(-360deg);   
  229.   }   
  230. }   
  231. .avatar:nth-of-type(4):before, .avatar:nth-of-type(2):before {   
  232.   -webkit-animation: 3s 1,8s cubic-bezier(0,175, 0,885, 0,32, 1,275) vorwärts springen, Farbe ändern 1s 1,8s cubic-bezier(0,175, 0,885, 0,32, 1,275) vorwärts;   
  233.           Animation: 3s 1,8s Cubic-Bezier(0,175, 0,885, 0,32, 1,275) vorwärts springen, Farbwechsel 1S 1,8s Cubic-Bezier(0,175, 0,885, 0,32, 1,275) vorwärts;   
  234. }   
  235. .avatar:nth-of-type(7):before {   
  236.   -webkit-animation: 3s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts springen, colorchange 1s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts;   
  237.           Animation: 3s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts springen, Farbwechsel 1s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts;   
  238. }   
  239. .avatar:nth-of-type(3):before {   
  240.   -webkit-animation: 3s 2,8s cubic-bezier(0,175, 0,885, 0,32, 1,275) vorwärts springen, 1 s 2,8s cubic-bezier(0,175, 0,885, 0,32, 1,275) vorwärts ändern;   
  241.           Animation: 3s 2,8s Cubic-Bezier(0,175, 0,885, 0,32, 1,275) vorwärts springen, Farbwechsel 1 S 2,8s Cubic-Bezier(0,175, 0,885, 0,32, 1,275) vorwärts;   
  242. }   
  243. .avatar:nth-of-type(1):before {   
  244.   -webkit-animation: 3s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts springen, Farbe ändern 1s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts;   
  245.           Animation: 3s 3s Cubic-Bezier(0,175, 0,885, 0,32, 1,275) vorwärts springen, Farbwechsel 1 S 3s Cubic-Bezier(0,175, 0,885, 0,32, 1,275) vorwärts;   
  246. }   
  247. .avatar:nth-of-type(6):before {   
  248.   -webkit-animation: 3s 3,2s cubic-bezier(0,175, 0,885, 0,32, 1,275) vorwärts springen, Farbe ändern 1s 3,2s cubic-bezier(0,175, 0,885, 0,32, 1,275) vorwärts;   
  249.           Animation: 3s 3,2s Cubic-Bezier(0,175, 0,885, 0,32, 1,275) vorwärts springen, Farbwechsel 1 S 3,2s Cubic-Bezier(0,175, 0,885, 0,32, 1,275) vorwärts;   
  250. }  
  251. .avatar:nth-of-type(5):before {   
  252.   -webkit-animation: 3s 3,8s cubic-bezier(0,175, 0,885, 0,32, 1,275) vorwärts springen, Farbe ändern 1s 3,8s cubic-bezier(0,175, 0,885, 0,32, 1,275) vorwärts;   
  253.           Animation: 3s 3,8s Cubic-Bezier(0,175, 0,885, 0,32, 1,275) vorwärts springen, Farbwechsel 1 S 3,8s Cubic-Bezier(0,175, 0,885, 0,32, 1,275) vorwärts;   
  254. }   
  255. .avatar:nth-of-type(8):before {   
  256.   -webkit-animation: 3s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts springen, Farbe ändern 1s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts;   
  257.           Animation: 3s 4s Cubic-Bezier(0,175, 0,885, 0,32, 1,275) vorwärts springen, Farbwechsel 1 S 4s Cubic-Bezier(0,175, 0,885, 0,32, 1,275) vorwärts;   
  258. }   
  259.   
  260. .image {   
  261.   Position: absolut;   
  262.   oben: 0;   
  263.   richtigrichtig: 0;   
  264.   untenunten: 0;   
  265.   links: 0;   
  266.   Marge: automatisch;   
  267.   Höhe: 220px;   
  268.   Breite: 220px;   
  269. }   
  270. .image img {   
  271.   Position: relativ;   
  272.   Höhe: 220px;   
  273.   Breite: 220px;   
  274.   Grenze-Radius: 50 %;   
  275.   z-index: 1;   
  276. }  
  277. .image:before {   
  278.   Position: absolut;   
  279.   oben: 0;   
  280.   richtigrichtig: 0;   
  281.   untenunten: 0;   
  282.   links: 0;   
  283.   Marge: automatisch;   
  284.   Inhalt: '';   
  285.   Höhe: 100 %;   
  286.   Breite: 100 %;   
  287.   Hintergrund: #f9fff7;   
  288.   Rahmen: 3px durchgehend #e7f5d1;   
  289.   Grenze-Radius: 50 %;   
  290.   -webkit-animation: pulse 1s 1.4s ease-out;   
  291.           Animation: Impuls 1 s 1,4 s Nachlassen;   
  292.   -webkit-animation-iteration-count: 3;   
  293.           animation-iteration-count: 3;   
  294. }   
  295. .image .smiley {   
  296.   Position: absolut;   
  297.   oben: -8px;   
  298.   richtigrichtig: -8px;   
  299.   Höhe: 64px;   
  300.   Breite: 64px;   
  301.   Hintergrund: #b5e763;   
  302.   Grenze-Radius: 50 %;   
  303.   Rahmen: 5px durchgehend weiß;   
  304.   -webkit-animation: 5s cubic-bezier(0.175, 0.885, 0.32, 1.275) vorwärts springen;   
  305.           Animation: 5 Sekunden Kubikbezier (0,175, 0,885, 0,32, 1,275) vorwärts springen;   
  306.   -webkit-transform-origin: center;   
  307.       -ms-transform-origin: center;   
  308.           transform-origin: center;   
  309.   z-index: 1;   
  310. }  
  311. .image .smiley svg {   
  312.   Position: absolut;   
  313.   oben: 0;   
  314.   richtigrichtig: 0;   
  315.   untenunten: 0;   
  316.   links: 0;   
  317.   Marge: automatisch;   
  318.   -webkit-animation: 5s 0,075s cubic-bezier(0,175, 0,885, 0,32, 1,275) vorwärts springen;   
  319.           Animation: 5 s 0,075 s Kubikbezier (0,175, 0,885, 0,32, 1,275) vorwärts springen;   
  320. }   
  321.   
  322. @-webkit-keyframes bounce {   
  323.   0 % {   
  324.     -webkit-transform: scale(0);   
  325.             transform: scale(0);   
  326.   }   
  327.   5 % {   
  328.     -webkit-transform: scale(1.5);   
  329.             transform: scale(1.5);   
  330.   }   
  331.   10 %, 100 % {   
  332.     -webkit-transform: scale(1);   
  333.             transform: scale(1);   
  334.   }   
  335. }   
  336.   
  337. @keyframes bounce {   
  338.   0 % {   
  339.     -webkit-transform: scale(0);   
  340.             transform: scale(0);   
  341.   }   
  342.   5 % {   
  343.     -webkit-transform: scale(1.5);   
  344.             transform: scale(1.5);   
  345.   }   
  346.   10 %, 100 % {   
  347.     -webkit-transform: scale(1);   
  348.             transform: scale(1);   
  349.   }   
  350. }   
  351. @-webkit-keyframes pulse {   
  352.   0 % {   
  353.     -webkit-transform: scale(0.1, 0.1);   
  354.             transform: scale(0.1, 0.1);   
  355.     Deckkraft: 0,0;   
  356.   }   
  357.   50 % {   
  358.     Deckkraft: 1,0;   
  359.   }  
  360.   100 % {   
  361.     -webkit-transform: scale(3);   
  362.             transform: scale(3);   
  363.     Deckkraft: 0,0;   
  364.   }   
  365. }   
  366. @keyframes pulse {   
  367.   0 % {   
  368.     -webkit-transform: scale(0.1, 0.1);   
  369.             transform: scale(0.1, 0.1);   
  370.     Deckkraft: 0,0;   
  371.   }   
  372.   50 % {   
  373.     Deckkraft: 1,0;   
  374.   }   
  375.   100 % {   
  376.     -webkit-transform: scale(3);   
  377.             transform: scale(3);   
  378.     Deckkraft: 0,0;   
  379.   }   
  380. }   
  381. @-webkit-keyframes colorchange {   
  382.   0 % {   
  383.     Hintergrund: #bec4bc;   
  384.   }   
  385.   100 % {   
  386.     Hintergrund: #b5e763;   
  387.   }   
  388. }   
  389. @keyframes colorchange {   
  390.   0 % {   
  391.     Hintergrund: #bec4bc;   
  392.   }   
  393.   100 % {   
  394.     Hintergrund: #b5e763;   
  395.   }   
  396. }   
  397. .avatar:nth-of-type(1) {   
  398.   Hintergrundbild: URL("128.jpg" );   
  399. }   
  400.   
  401. .avatar:nth-of-type(2) {   
  402.   Hintergrundbild: URL("rasagy.jpg" );   
  403. }   
  404.   
  405. .avatar:nth-of-type(3) {   
  406.   Hintergrundbild: URL("geeftvorm.jpg" );   
  407. }   
  408.   
  409. .avatar:nth-of-type(4) {   
  410.   Hintergrundbild: 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动画排列人物头像代码演示,谢谢阅读,希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5 verwendet Canvas zum Zeichnen von Texteffekten. HTML5-Tutorial-FähigkeitenNächster Artikel：HTML5 verwendet Canvas zum Zeichnen von Texteffekten. HTML5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen