Un exemple de démonstration de l'organisation des avatars de personnages à l'aide des compétences du didacticiel animation

Aujourd'hui, j'aimerais partager avec vous une démonstration de l'organisation des avatars de personnages dans des animations HTML5 et CSS3. Au début de cette page d'exemple, il n'y a qu'une image de belle fille au milieu, puis une image souriante apparaît, suivie de petites images de personnages, qui s'agencent lentement sous forme d'animation pour former un cercle sur la page. Le rendu est le suivant :

Code d'implémentation.

　code html :

Code XML/HTMLCopier le contenu dans le presse-papiers

<div classe='stage' >
<div class='image' >
<img src="https : //pbs.twimg.com/profile_images/529224080751202304/UNLt5nUZ_400x400.jpeg">
<div classe='smiley' >
<svg largeur="30px" hauteur="30px">
<chemin remplir="#effedd " 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>
<figure classe='avatar' >
figure>
<figure classe='avatar' >
figure>
<figure classe='avatar' >
figure>
<figure classe='avatar' >
figure>
<figure classe='avatar' >
figure>
<figure classe='avatar' >
figure>
<figure classe='avatar' >
figure>
<figure classe='avatar' >
figure>
div>

　　css3代码：

Code CSS复制内容到剪贴板

.stage {
position : absolue ;
haut : 0 ;
droitedroite : 0 ;
basbas : 0 ;
gauche : 0 ;
marge : auto ;
hauteur : 460px ;
largeur : 480px ;
}
.avatar {
position : absolue ;
haut : 0 ;
droitedroite : 0 ;
basbas : 0 ;
gauche : 0 ;
marge : auto ;
hauteur : 64px ;
largeur : 64px ;
répétition d'arrière-plan : pas de répétition ;
fond-taille : couverture ;
bordure-rayon : 50 % ;
-webkit-transform-origin : centre ;
-ms-transform-origin : centre ;
transformation-origine : centre ;
}
.avatar:avant {
contenu : '' ;
position : absolue ;
haut : -8 % ;
droitedroite : -8 % ;
hauteur : 17.06667px ;
largeur : 17.06667px ;
fond : #bec4bc;
bordure-rayon : 50 % ;
bordure : 3px solide blanc;
}
.avatar:nth-of-type(1) {
-webkit-animation : ani1 2s 0,1s cubic-bezier(0,175, 0,885, 0,32, 1,275) en avant ;
animation : ani1 2s 0,1s cubique-bézier(0,175, 0,885, 0,32, 1,275) en avant ;
}
@-webkit-keyframes ani1 {
0%, 20% {
-webkit-transform : rotate(45deg) translate(0) rotate(-45deg);
transformation : rotation (45 deg) translate(0) rotation (-45deg);
}
34 %, 100 % {
-webkit-transform : rotate(45deg) translate(208px) rotate(-45deg);
transformation : rotation (45deg) translate(208px) rotation (-45deg);
}
}
@keyframes ani1 {
0%, 20% {
-webkit-transform : rotate(45deg) translate(0) rotate(-45deg);
transformation : rotation (45 deg) translate(0) rotation (-45deg);
}
34 %, 100 % {
-webkit-transform : rotate(45deg) translate(208px) rotate(-45deg);
transformation : rotation (45deg) translate(208px) rotation (-45deg);
}
}
.avatar:nth-of-type(2) {
-webkit-animation : ani2 2s 0,2s cubic-bezier(0,175, 0,885, 0,32, 1,275) en avant ;
animation : ani2 2s 0,2s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant ;
}
@-webkit-keyframes ani2 {
0%, 20% {
-webkit-transform : rotate(90deg) translate(0) rotate(-90deg);
transformation : rotation (90 deg) translate (0) rotation (-90deg);
}
34 %, 100 % {
-webkit-transform : rotate(90deg) translate(208px) rotate(-90deg);
transformer : rotate(90deg) translate(208px) rotate(-90deg);
}
}
@keyframes ani2 {
0%, 20% {
-webkit-transform : rotate(90deg) translate(0) rotate(-90deg);
transformer : rotate(90deg) translate(0) rotate(-90deg);
}
34 %, 100 % {
-webkit-transform : rotate(90deg) translate(208px) rotate(-90deg);
transformer : rotate(90deg) translate(208px) rotate(-90deg);
}
}
.avatar:nth-of-type(3) {
-webkit-animation : ani3 2s 0,3s cubic-bezier(0,175, 0,885, 0,32, 1,275) en avant ;
animation : ani3 2s 0,3s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant ;
}
@-webkit-keyframes ani3 {
0%, 20% {
-webkit-transform : rotate(135deg) translate(0) rotate(-135deg);
transformation : rotation (135 deg) translate (0) rotation (-135deg);
}
34 %, 100 % {
-webkit-transform : rotate(135deg) translate(208px) rotate(-135deg);
transformer : rotate(135deg) translate(208px) rotate(-135deg);
}
}
@keyframes ani3 {
0%, 20% {
-webkit-transform : rotate(135deg) translate(0) rotate(-135deg);
transformation : rotation (135 deg) translate (0) rotation (-135deg);
}
34 %, 100 % {
-webkit-transform : rotate(135deg) translate(208px) rotate(-135deg);
transformer : rotate(135deg) translate(208px) rotate(-135deg);
}
}
.avatar:nth-of-type(4) {
-webkit-animation : ani4 2s 0,4s cubic-bezier(0,175, 0,885, 0,32, 1,275) en avant ;
animation : ani4 2s 0,4s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant ;
}
@-webkit-keyframes ani4 {
0%, 20% {
-webkit-transform : rotate(180deg) translate(0) rotate(-180deg);
transformation : rotation (180 deg) translate (0) rotation (-180deg);
}
34 %, 100 % {
-webkit-transform : rotate(180deg) translate(208px) rotate(-180deg);
transformer : rotate(180deg) translate(208px) rotate(-180deg);
}
}
@keyframes ani4 {
0%, 20% {
-webkit-transform : rotate(180deg) translate(0) rotate(-180deg);
transformation : rotation (180 deg) translate (0) rotation (-180deg);
}
34 %, 100 % {
-webkit-transform : rotate(180deg) translate(208px) rotate(-180deg);
transformer : rotate(180deg) translate(208px) rotate(-180deg);
}
}
.avatar:nth-of-type(5) {
-webkit-animation : ani5 2s 0,5s cubic-bezier(0,175, 0,885, 0,32, 1,275) en avant ;
animation : ani5 2s 0,5s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant ;
}
@-webkit-keyframes ani5 {
0%, 20% {
-webkit-transform : rotate(225deg) translate(0) rotate(-225deg);
transformation : rotation (225deg) translate(0) rotation (-225deg);
}
34 %, 100 % {
-webkit-transform : rotate(225deg) translate(208px) rotate(-225deg);
transformer : rotate(225deg) translate(208px) rotate(-225deg);
}
}
@keyframes ani5 {
0%, 20% {
-webkit-transform : rotate(225deg) translate(0) rotate(-225deg);
transformation : rotation (225deg) translate(0) rotation (-225deg);
}
34 %, 100 % {
-webkit-transform : rotate(225deg) translate(208px) rotate(-225deg);
transformer : rotate(225deg) translate(208px) rotate(-225deg);
}
}
.avatar:nth-of-type(6) {
-webkit-animation : ani6 2s 0,6s cubic-bezier(0,175, 0,885, 0,32, 1,275) en avant ;
animation : ani6 2s 0,6s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant ;
}
@-webkit-keyframes ani6 {
0%, 20% {
-webkit-transform : rotate(270deg) translate(0) rotate(-270deg);
transformation : rotation (270 deg) translate(0) rotation (-270deg);
}
34 %, 100 % {
-webkit-transform : rotate(270deg) translate(208px) rotate(-270deg);
transformer : rotate(270deg) translate(208px) rotate(-270deg);
}
}
@keyframes ani6 {
0%, 20% {
-webkit-transform : rotate(270deg) translate(0) rotate(-270deg);
transformation : rotation (270 deg) translate(0) rotation (-270deg);
}
34 %, 100 % {
-webkit-transform : rotate(270deg) translate(208px) rotate(-270deg);
transformer : rotate(270deg) translate(208px) rotate(-270deg);
}
}
.avatar:nth-of-type(7) {
-webkit-animation : ani7 2s 0,7s cubic-bezier(0,175, 0,885, 0,32, 1,275) en avant ;
animation : ani7 2s 0,7s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant ;
}
@-webkit-keyframes ani7 {
0%, 20% {
-webkit-transform : rotate(315deg) translate(0) rotate(-315deg);
transformer : rotation (315deg) translate(0) rotation (-315deg);
}
34 %, 100 % {
-webkit-transform : rotate(315deg) translate(208px) rotate(-315deg);
transformer : rotate(315deg) translate(208px) rotate(-315deg);
}
}
@keyframes ani7 {
0%, 20% {
-webkit-transform : rotate(315deg) translate(0) rotate(-315deg);
transformation : rotation (315deg) translate(0) rotation (-315deg);
}
34 %, 100 % {
-webkit-transform : rotate(315deg) translate(208px) rotate(-315deg);
transformer : rotate(315deg) translate(208px) rotate(-315deg);
}
}
.avatar:nth-of-type(8) {
-webkit-animation : ani8 2s 0,8s cubic-bezier(0,175, 0,885, 0,32, 1,275) en avant ;
animation : ani8 2s 0,8s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant ;
}
@-webkit-keyframes ani8 {
0%, 20% {
-webkit-transform : rotate(360deg) translate(0) rotate(-360deg);
transformer : rotation (360deg) translate(0) rotation (-360deg);
}
34 %, 100 % {
-webkit-transform : rotate(360deg) translate(208px) rotate(-360deg);
transformer : rotate(360deg) translate(208px) rotate(-360deg);
}
}
@keyframes ani8 {
0%, 20% {
-webkit-transform : rotate(360deg) translate(0) rotate(-360deg);
transformer : rotation (360deg) translate(0) rotation (-360deg);
}
34 %, 100 % {
-webkit-transform : rotate(360deg) translate(208px) rotate(-360deg);
transformer : rotate(360deg) translate(208px) rotate(-360deg);
}
}
.avatar:nth-of-type(4):avant, .avatar:nth-of-type(2):avant {
-webkit-animation : rebond 3s 1,8s cubique-bézier(0,175, 0,885, 0,32, 1,275) en avant, changement de couleur 1s 1,8s cubique-bézier(0,175, 0,885, 0,32, 1,275) en avant ;
animation : rebond 3s 1,8s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant, changement de couleur 1s 1,8 s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant ;
}
.avatar:nth-of-type(7):avant {
-webkit-animation : rebond 3s 2s cubique-bézier(0,175, 0,885, 0,32, 1,275) en avant, changement de couleur 1s 2s cubique-bézier(0,175, 0,885, 0,32, 1,275) en avant ;
animation : rebond 3s 2s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant, changement de couleur 1s 2s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant ;
}
.avatar:nth-of-type(3):avant {
-webkit-animation : rebond 3s 2,8s cubique-bézier(0,175, 0,885, 0,32, 1,275) en avant, changement de couleur 1s 2,8s cubique-bézier(0,175, 0,885, 0,32, 1,275) en avant ;
animation : rebond 3s 2,8s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant, changement de couleur 1s 2,8 s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant ;
}
.avatar:nth-of-type(1):avant {
-webkit-animation : rebond 3s 3s cubique-bézier(0,175, 0,885, 0,32, 1,275) en avant, changement de couleur 1s 3s cubique-bézier(0,175, 0,885, 0,32, 1,275) en avant ;
animation : rebond 3s 3s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant, changement de couleur 1s 3s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant ;
}
.avatar:nth-of-type(6):avant {
-webkit-animation : rebond 3s 3,2s cubic-bezier(0,175, 0,885, 0,32, 1,275) vers l'avant, changement de couleur 1s 3,2s cubic-bezier(0,175, 0,885, 0,32, 1,275) vers l'avant ;
animation : rebond 3s 3,2s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant, changement de couleur 1s 3,2s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant ;
}
.avatar:nth-of-type(5):avant {
-webkit-animation : rebond 3s 3,8s cubic-bezier(0,175, 0,885, 0,32, 1,275) vers l'avant, changement de couleur 1s 3,8s cubic-bezier(0,175, 0,885, 0,32, 1,275) vers l'avant ;
animation : rebond 3s 3,8s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant, changement de couleur 1s 3,8 s cubique-bézier(0,175, 0,885, 0,32, 1,275) vers l'avant ;
}
.avatar:nth-of-type(8):avant {
-webkit-animation : rebond 3s 4s cubique-bézier(0,175, 0,885, 0,32, 1,275) en avant, changement de couleur 1s 4s cubique-bézier(0,175, 0,885, 0,32, 1,275) en avant ;
animation : rebond 3s 4s cubique-bézier (0,175, 0,885, 0,32, 1,275) vers l'avant, changement de couleur 1s 4s cubique-bézier (0,175, 0,885, 0,32, 1,275) vers l'avant ;
}
.image {
position : absolue ;
haut : 0 ;
droitedroite : 0 ;
basbas : 0 ;
gauche : 0 ;
marge : auto ;
hauteur : 220px ;
largeur : 220 px ;
}
.image img {
position : relative ;
hauteur : 220px ;
largeur : 220 px ;
bordure-rayon : 50 % ;
z-index : 1 ;
}
.image:avant {
position : absolue ;
haut : 0 ;
droitedroite : 0 ;
basbas : 0 ;
gauche : 0 ;
marge : auto ;
contenu : '' ;
hauteur : 100 % ;
largeur : 100 % ;
fond : #f9fff7 ;
bordure : 3px solide #e7f5d1;
bordure-rayon : 50 % ;
-webkit-animation : allègement de l'impulsion 1 s 1,4 s ;
animation : impulsion 1 s 1,4 s d'atténuation ;
-webkit-animation-iteration-count : 3 ;
nombre d'itérations d'animation : 3 ;
}
.image .smiley {
position : absolue ;
haut : -8px ;
droitedroite : -8px ;
hauteur : 64px ;
largeur : 64px ;
fond : #b5e763 ;
bordure-rayon : 50 % ;
bordure : 5px solide blanc;
-webkit-animation : rebond 5s cubic-bezier(0,175, 0,885, 0,32, 1,275) vers l'avant ;
animation : rebond 5s cubique-bézier (0,175, 0,885, 0,32, 1,275) vers l'avant ;
-webkit-transform-origin : centre ;
-ms-transform-origin : centre ;
transformation-origine : centre ;
z-index : 1 ;
}
.image .smiley svg {
position : absolue ;
haut : 0 ;
droitedroite : 0 ;
basbas : 0 ;
gauche : 0 ;
marge : auto ;
-webkit-animation : rebond 5s 0,075s cubic-bezier(0,175, 0,885, 0,32, 1,275) vers l'avant ;
animation : rebond 5 s 0,075 s cubique-bézier (0,175, 0,885, 0,32, 1,275) vers l'avant ;
}
@-webkit-keyframes bounce {
0% {
-webkit-transform : scale(0);
transform: scale(0);
}
5% {
-webkit-transform : scale(1.5);
transform: scale(1.5);
}
10 %, 100 % {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes bounce {
0% {
-webkit-transform : scale(0);
transform: scale(0);
}
5% {
-webkit-transform : scale(1.5);
transform: scale(1.5);
}
10 %, 100 % {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes pulse {
0% {
-webkit-transform : scale(0.1, 0.1);
transform : scale(0.1, 0.1);
opacité : 0,0 ;
}
50 % {
opacité : 1,0 ;
}
100 % {
-webkit-transform : scale(3);
transform: scale(3);
opacité : 0,0 ;
}
}
@keyframes pulse {
0% {
-webkit-transform : scale(0.1, 0.1);
transform : scale(0.1, 0.1);
opacité : 0,0 ;
}
50 % {
opacité : 1,0 ;
}
100 % {
-webkit-transform : scale(3);
transform: scale(3);
opacité : 0,0 ;
}
}
@-webkit-keyframes colorchange {
0% {
fond : #bec4bc;
}
100 % {
fond : #b5e763 ;
}
}
@keyframes changement de couleur {
0% {
fond : #bec4bc;
}
100 % {
fond : #b5e763 ;
}
}
.avatar:nth-of-type(1) {
image-de-fond : url("128.jpg" );
}
.avatar:nth-of-type(2) {
image-de-fond : url("rasagy.jpg" );
}
.avatar:nth-of-type(3) {
image d'arrière-plan : url("geeftvorm.jpg" );
}
.avatar:nth-of-type(4) {
image-de-fond : url("VinThomas.jpg" );
}
.avatar:nth-of-type(5) {
image-de-fond : url("ladylexy.jpg" );
}
.avatar:nth-of-type(6) {
image-de-fond : url("claudioguglieri.jpg" );
}
.avatar:nth-of-type(7) {
image-de-fond : url("jina.jpg" );
}
.avatar:nth-of-type(8) {
image-de-fond : url("peterme.jpg" );
}