Maison >interface Web >tutoriel CSS >Animation de chargement de la page d'apprentissage CSS3 (5)
Animation de chargement de la page d'apprentissage CSS3 (5)
- 青灯夜游avant
- 2018-10-15 16:36:132243parcourir
J'ai déjà publié quatre articles, avec 22 effets. Dans cet article, je partagerai avec vous 6 types d'animations de chargement de page CSS3, pour un total de 28 effets d'animation de chargement de page. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
Dans l'article précédent [Animation de chargement de page d'apprentissage CSS3 (4) ], j'ai partagé 6 autres animations de chargement CSS3, et je continuerai à les partager aujourd'hui (le titre continue du précédent temps).
Vingt-trois, effet vingt-trois
Deux carrés sont initialement positionnés en haut à gauche (en haut : 0 ; à gauche : 0 ;
Un mouvement complet est divisé en quatre étapes : dans la première étape, le coin supérieur gauche se déplace vers le haut) ; à droite, et pivote de 90 °, la largeur et la hauteur sont réduites ; dans la deuxième étape, le coin supérieur droit est déplacé vers le bas à droite, pivoté de 180 °, et la largeur et la hauteur sont restaurées dans la troisième étape, le coin inférieur droit est ; déplacé vers le bas à gauche, pivoté de 270°, et la largeur et la hauteur sont réduites ; dans la quatrième étape, le coin inférieur gauche se déplace vers le haut à gauche, tourne de 360° et restaure la largeur et la hauteur.
La différence de temps de retard d'animation est négative pour la moitié du temps d'animation.
{animation: party_ball 2s ease infinite;}
@keyframes party_ball {
25% {
-webkit-transform: scale(.5) rotateZ(90deg);
transform: scale(.5) rotateZ(90deg);
top: 0;
left: 100%;
}
50% {
-webkit-transform: scale(1) rotateZ(180deg);
transform: scale(1) rotateZ(180deg);
top: 100%;
left: 100%;
}
75% {
-webkit-transform: scale(.5) rotateZ(270deg);
transform: scale(.5) rotateZ(270deg);
top: 100%;
left: 0;
}
100% {
-webkit-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
top: 0;
left: 0;
}
}
Vingt-quatre, effet vingt-quatre
Semblable à l'effet battant d'une flamme, positionnez les trois carrés p horizontalement au milieu, verticalement en bas, et définissez la largeur et la hauteur initiales sur 0.
Tout en montant, modifiez la largeur et la hauteur du carré.
{animation: fire_ball 1.5s linear infinite;}@keyframes fire_ball {
50% {
height: 30px;
width: 30px;
top: 50%;
}
100% {
height: 0;
width: 0;
top: 0;
}
}
Vingt-cinq, effet vingt-cinq
C'est très similaire au jeu auquel je jouais quand j'étais enfant - Pac-Man
La production de Pac-Man à gauche : la largeur et la hauteur des deux p sont 0 , définissez uniquement la bordure et définissez l'attribut de couleur de la bordure droite. Pour être transparent, le code et l'effet sont les suivants :
.pac_head {
border: 25px solid #fff;
border-right-color: transparent;
border-radius: 50%;
}
La bouche de Pac-Man a Les deux p restants sont tournés vers l'axe Z. Une rotation inverse de l'axe Z effectue l'action de manger.
Les trois petites boules à droite sont toutes prêtes à se déplacer vers le milieu du côté droit et à se diriger vers la bouche de Pac-Man. Ajustez simplement le temps d'animation des boules et de Pac-Man en conséquence.
@keyframes pac_ball {
100% {
right: 55%;
}
}
Vingt-six, effet vingt-six
Papier à sauter
La difficulté de cet effet est de savoir comment créer l'effet de chute et de déformation. C'est en fait très simple. Tout d'abord, vous devez comprendre qu'un carré, tant qu'il pivote autour de l'axe Z d'un multiple de 90, aura exactement le même aspect que l'image originale. Il n'y a alors pas de création d'effet très simple. Il faut envisager d'ajouter un effet de déformation à chaque coin.
Effet de déformation : changez simplement la valeur de border-radius pour produire ce type de déformation.
@keyframes beat_ball {
25% {
transform: translateY(25%) rotate(22.5deg);//下落
border-bottom-right-radius: 10%;
}
50% {
border-bottom-right-radius: 100%;
transform: translateY(50%) scale(1, 0.8) rotate(45deg) //scale，是为了让形变看起来有弹性 }
75% {
transform: translateY(25%) rotate(67.5deg) //上升 }
100% {
transform: translateY(0) rotate(90deg) //旋转90°结束一个周期，刚好和初始状态一模一样，那就直接重复执行动画即可 }
}
L'effet d'ombre est encore meilleur. Créez une ellipse plate, une ombre en forme de boîte et ajoutez simplement l'effet d'ombre si nécessaire.
@keyframes beat_shadow {
50%{
transform: scale(1.25,0.8);
}
}
Vingt-sept, effet vingt-sept
A p, un pseudo cours est fait.
p est responsable de la rotation, et la pseudo classe est responsable du changement de hauteur. Chacun remplit ses fonctions.
@keyframes locker_ball { //p旋转
25%{
transform: rotateZ(180deg);
}
50%{
transform: rotateZ(180deg);
}
75%{
transform: rotateZ(360deg);
}
100%{
transform: rotateZ(360deg);
}
}
@keyframes locker_ballh { //伪类高度改变
25%{
height: 40px;
}
50%{
height: 0;
}
75%{
height: 0;
}
100%{
height: 40px;
}
}
Vingt-huit, effet vingt-huit
L'effet de l'horloge (mon positionnement ne semble pas être au milieu)
L'effet de l'horloge peut être obtenu en utilisant une seule animation d'image clé, qui consiste à faire pivoter 360°, juste changer deux Le temps de mouvement d'animation du pointeur est suffisant.
@keyframes clock {
100%{
transform: rotateZ(360deg);
}
}
Dans cette série d'animations, certains effets de pause sont obtenus grâce au contrôle des images clés pour maintenir l'état d'un certain pourcentage à un certain pourcentage tandis que d'autres sont obtenus grâce à la facilité de la courbe de mouvement ;
Fini de répandre les fleurs ! J'espère que cette série pourra être utile à l'apprentissage de tout le monde. Pour plus de didacticiels connexes, veuillez visiter le didacticiel vidéo de base CSS , didacticiel vidéo CSS3 , didacticiel bootstrap !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!