Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
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

WBOY
Freigeben： 2016-05-16 15:47:08
Original
1972 Leute haben es durchsucht

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

Verwandte Etiketten：
css3动画
Quelle：php.cn
Vorheriger Artikel：HTML5 verwendet Canvas zum Zeichnen von Texteffekten. HTML5-Tutorial-Fähigkeiten Nächster Artikel：HTML5 verwendet Canvas zum Zeichnen von Sonnensystemeffekten
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Regulärer Ausdrucksfilter für MERN-Stack-Suchfelder und Kontrollkästchen Ich versuche durch Learning by Doing zu verstehen, wie der MERN-Stack zusammenarbeitet, un...
Aus 2024-04-06 14:53:12
0
1
425
Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
Aus 2024-04-05 12:57:00
0
1
456
Problem bei der Prestashop-Installation: Das benutzerdefinierte Modul kann nicht installiert werden Ich bin neu in der Prestashop-Modulentwicklung. Ich versuche, Amys erstes Prestashop-Modul...
Aus 2024-04-03 19:24:44
0
1
402
PHP-Tutorial: Wie lade ich Texte und Bilder mit PHP auf Linkedin hoch? Ich versuche, Texte, Bilder und Links mit LinkedinsRestAPI (https://learn.microsoft.com/en...
Aus 2024-04-03 18:42:29
0
1
420
Ich kann keine Informationen aus meiner MySQL-Datenbank empfangen, obwohl ich Tutorials gesehen habe, die genau das Gleiche tun Ich versuche also, ein Programm zu erstellen, das eine MySQL-Datenbank liest und schreibt,...
Aus 2024-04-03 14:46:04
0
1
298
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage