So erstellen Sie schnell eine 3-Punkt-Ladeanimation mit CSS-CSS-Tutorial-php.cn

So erstellen Sie schnell eine 3-Punkt-Ladeanimation mit CSS

藏色散人

Freigeben： 2021-09-25 17:27:06

Original

3355 Leute haben es durchsucht

Im vorherigen Artikel „Wie erstelle ich mit CSS einen wellenförmigen Hintergrund?“ 》Stellt Ihnen vor, wie Sie CSS zum Erstellen eines Wellenhintergrunds verwenden. Freunde in Not können es lesen und lernen ~

Dann stellt Ihnen dieser Artikel die häufigste Effektimplementierung im Front-End-Entwicklungsprozess vor, nämlich das Laden Animation erreichen.

Um es einfach auszudrücken: Der übliche Warteeffekt beim Laden von Webseiten ist normalerweise ein dynamischer Ladeeffekt.

Jetzt stelle ich Ihnen eine sehr einfache und grundlegende Methode vor, um den Effekt des Ladens einer Animation zu erzielen:

Geben Sie direkt den Code ein:

<!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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

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

Die folgenden zwei Schlüsselattribute sind eingeführt:

CSS3 animation (animation) property 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：从父元素继承属性。

Nach dem Login kopieren

CSS3 @keyframes 规则

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

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

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

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

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

Syntax: animation: Name Dauer Timing-Funktion Verzögerung Iteration-Anzahl Richtung Füllmodus Wiedergabe -state;

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

Nach dem Login kopieren

CSS3 @keyframes Rules
Verwenden Sie @keyframes-Regeln, um Animationen zu erstellen. Animationen werden durch schrittweises Wechseln von einer CSS-Stileinstellung zur anderen erstellt. 🎜Während des Animationsprozesses können die CSS-Stileinstellungen mehrfach geändert werden. Geben Sie an, wann eine Änderung erfolgt, indem Sie % oder die Schlüsselwörter „von“ und „bis“ verwenden, die mit 0 % bis 100 % identisch sind. 🎜🎜0 % ist, wenn die Animation beginnt, 100 % ist, wenn die Animation beendet ist. Für eine optimale Browserunterstützung sollten Selektoren immer als 0 % und 100 % definiert werden. 🎜🎜Hinweis: Verwenden Sie das Animationsattribut, um das Erscheinungsbild der Animation zu steuern, und verwenden Sie auch den Selektor, um die Animation zu binden. 🎜🎜 Grammatik: @keyframes Animationsname {keyframes-selector {css-styles;}} 🎜 🎜》! 🎜🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie schnell eine 3-Punkt-Ladeanimation mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!