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.
XML/HTML-CodeInhalt in die Zwischenablage kopieren
- <div class='stage' >
-
<div class='image' >
-
<img src="https: //pbs.twimg.com/profile_images/529224080751202304/UNLt5nUZ_400x400.jpeg">
-
<div class='smiley' >
-
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"
-
/>svg>
div>
div>
-
<Figur Klasse
=- 'Avatar' >
- Abbildung>
<Figur Klasse
=- 'Avatar' >
- Abbildung>
<Figur Klasse
=- 'Avatar' >
- Abbildung>
-
<Figur Klasse='Avatar' >
-
Abbildung>
-
<Figur Klasse='Avatar' >
-
Abbildung>
-
<Figur Klasse='Avatar' >
-
Abbildung>
-
<Figur Klasse='Avatar' >
-
Abbildung>
-
<Figur Klasse='Avatar' >
-
Abbildung>
-
div>
好了以上就是今天介绍的html5和css3动画排列人物头像代码演示,谢谢阅读,希望能帮到大家,请继续关注脚本之家,我们会努力分享更多优秀的文章.