Comment créer rapidement une animation de chargement en 3 points avec CSS-tutoriel CSS-php.cn

Comment créer rapidement une animation de chargement en 3 points avec CSS

藏色散人

Libérer： 2021-09-25 17:27:06

original

3428 Les gens l'ont consulté

Dans l'article précédent « Comment créer un fond ondulé en utilisant CSS ? "" vous présente comment utiliser CSS pour créer un arrière-plan de vague. Les amis dans le besoin peuvent le lire et en apprendre davantage ~

Ensuite, cet article vous présentera l'implémentation d'effets la plus courante dans le processus de développement front-end, à savoir le chargement de l'animation.

Pour faire simple, par exemple, l'effet d'attente de chargement de page Web courant... est généralement un effet de chargement dynamique.

Maintenant, je vais vous présenter une méthode très simple et basique pour obtenir l'effet de chargement d'animation :

Code direct :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: black;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .dot1, .dot2, .dot3 {
            background: #fff;
            width: 15px;
            height: 15px;
            border:double;
            border-color:black;
            border-radius: 50%;
            margin: 10px;
        }

        .dot1 {
            animation: jump 1.6s -0.32s linear infinite;
            background: #4B0082;
        }
        .dot2 {
            animation: jump 1.6s -0.16s linear infinite;
            background: #B22222;
        }
        .dot3 {
            animation: jump 1.6s linear infinite;
            background: #006400;
        }

        @keyframes jump {
            0%, 80%, 100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            } 40% {
                  -webkit-transform: scale(2.0);
                  transform: scale(2.0);
              }
        }
    </style>
</head>
<body>
<div class="dot1"> </div>
<div class="dot2"></div>
<div class="dot3"></div>
</body>

</html>

Copier après la connexion

L'effet est le suivant :

GIF 2021-8-25 星期三下午 3-21-59.gif

Les deux attributs clés suivants sont introduits :

Propriété CSS3 animation (animation) animation（动画）属性

语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值 
animation-name：指定要绑定到选择器的关键帧的名称
animation-duration：动画指定需要多少秒或毫秒完成
animation-timing-function：设置动画将如何完成一个周期
animation-delay：设置动画在启动前的延迟间隔。
animation-iteration-count：定义动画的播放次数。
animation-direction：指定是否应该轮流反向播放动画。
animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state：指定动画是否正在运行或已暂停。
initial：设置属性为其默认值。
inherit：从父元素继承属性。

Copier après la connexion

CSS3 @keyframes 规则

使用@keyframes规则可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中，可以更改CSS样式的设定多次。指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。

0％是开头动画，100％是当动画完成。为了获得最佳的浏览器支持，应该始终定义为0％和100％的选择器。

注: 使用animation属性来控制动画的外观，还使用选择器绑定动画。

语法：@keyframes animationname {keyframes-selector {css-styles;}}

Syntaxe : animation : nom durée durée-fonction délai itération-compte direction remplissage-mode état de lecture ;

值
animationname：必需的，定义animation的名称。
keyframes-selector：必需的，动画持续时间的百分比。
合法值：
0-100%
from (和0%相同)
to (和100%相同)
注意：可以用一个动画keyframes-selectors。
css-styles：必需的，一个或多个合法的CSS样式属性。

Copier après la connexion

CSS3 @keyframes Règles
Utilisez les règles @keyframes pour créer des animations. L'animation est créée en passant progressivement d'un paramètre de style CSS à un autre. 🎜Pendant le processus d'animation, les paramètres de style CSS peuvent être modifiés plusieurs fois. Spécifiez quand un changement se produit à l'aide de %, ou des mots-clés « de » et « à », qui sont identiques à 0 % à 100 %. 🎜🎜0 % correspond au début de l'animation, 100 % correspond à la fin de l'animation. Pour une meilleure prise en charge du navigateur, les sélecteurs doivent toujours être définis sur 0 % et 100 %. 🎜🎜Remarque : utilisez l'attribut d'animation pour contrôler l'apparence de l'animation, et utilisez également le sélecteur pour lier l'animation. 🎜🎜 Grammaire : @keyframes animationname {keyframes-selector {css-styles;}}🎜rrreee🎜La plate-forme de site Web chinoise PHP propose de nombreuses ressources pédagogiques vidéo, invitez tout le monde à apprendre "🎜🎜Tutoriel vidéo CSS 🎜 🎜》! 🎜🎜

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!