Teilen Sie die Beispielcodes von 3 Laden von Designs in CSS3 (1)

Vor kurzem studiere ich die Kursreihe <a href="http://www.php.cn/wiki/1118.html" target="_blank">HTML5</a>, die viele Inhalte abdeckt. Obwohl der Inhalt sehr einfach und leicht zu verstehen ist, ist es sehr schwer, sich daran zu erinnern, wie zum Beispiel einige der CSS3-Attribute von . Die CSS3 Loading Animation , die ich heute vorstellen werde, ist auch der in der Geek Academy vorgestellte Inhalt. Interessierte Schüler können sich auch das Video ansehen.

Einen laden

demo01.gif

Der erste Ladeanimationseffekt ist wie dieses Bild. Umdrehen, lasst uns aufnehmen ein Blick auf den Code.

Zuerst definieren wir den HTML-Code. Der Einfachheit halber füge ich hier nur den Kerncode ein

<p class="box">
    <p class="loading">
        <i></i>
    </p>
</p>

p Unten verwenden wir das Tag i Fragen Sie nach dem Grund. Sie können es auch durch das p-Tag oder ein anderes Tag ersetzen. Verwenden wir CSS, um unser Html

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.box {
    width: 100%;
    padding: 3%;
}

.loading {
    display: flex;

    width: 30%;
    height: 250px;
    margin: 50px auto;

    border: 1px solid #699;

    justify-content: center;
    align-items: center;
}

zu ändern. Lassen Sie mich hier erklären, dass in dieser Zeile von margin: 50px auto; die oberen und unteren Ränder auf 50px gesetzt werden. links und rechts Stellen Sie auto ein, um unser Element horizontal zu zentrieren.

Und was bedeutet box-sizing: border-box hier? Wir setzen die Breite auf das 30% des übergeordneten Elements und legen einen Rahmen fest. Zählt die von diesem Rahmen eingenommene Größe zur Breite des aktuellen Elements? Der hier festgelegte Wert ist die Beschreibung plus die vom Rahmen eingenommene Größe. Das aktuelle Element nimmt 30 % des übergeordneten Elements ein.

display,align-items,justify-content Diese drei Attribute dienen dazu, den Inhalt im i-Tag in der Mitte von p zu platzieren. Verwenden Sie zunächst das Attribut display, um p als flexibles Boxelement festzulegen, verwenden Sie dann align-items, um das Element so festzulegen, dass es auf der vertikalen Achse zentriert wird, und justify-content, um das Element so festzulegen, dass es auf der horizontalen Achse zentriert wird . Beachten Sie, dass der Zentrierungseffekt wirksam sein muss, wenn diese drei Elemente gleichzeitig vorhanden sind, da die beiden letztgenannten Attribute vom ersten Attribut abhängig sind.

 .loading i {
        width: 35px;
        height: 35px;
        position: relative;
        display: block;
        border-radius: 50%;
        background: linear-gradient(transparent 0%, transparent 50%,
                #699 50%, #699 100%);
        -webkit-animation: loading 1s linear 0s infinite;
    }

Schauen Sie sich das Attribut background an, das einen linearen Verlaufseffekt festlegt. Die Parameter sind für mich auch neu und ich verstehe nicht, warum es so geschrieben ist. Tatsächlich kann es so verstanden werden: Von 0% bis 70% ist auf transparent gesetzt, von 70% bis 100% ist auf #699 eingestellt, sodass wir das Bild oben sehen können Bild. Das Attribut

-webkit-animation gibt eine Animation für das aktuelle Element an. Der erste Parameter ist der Name der Animation. Diese Animation muss von uns selbst definiert werden unten. Der zweite Parameter ist die Dauer der Animation, der dritte Parameter ist die Geschwindigkeitskurve der Animation, der vierte Parameter ist die Animationsverzögerungszeit und der fünfte Parameter ist die Häufigkeit, mit der die Animation abgespielt wird. Werfen wir einen Blick auf unsere eigene definierte Animation loading

@-webkit-keyframes loading {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

, die sehr leicht zu verstehen ist, d. h. rotierende Elemente in verschiedenen Phasen der Animation. Es ist erwähnenswert, dass diese Art der Definition den Animationseffekt nur in den Browsern

und Chrome sehen kann. Wenn wir also den Animationseffekt auch im Firefox-Browser anzeigen möchten, müssen wir ihn wie folgt definieren. Wenn sich Safari

 @-moz-keyframes  loading-moz{
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
 }

auf bezieht, ist fast dasselbe, nur die Kopfzeile wird geändert (was die Definition in anderen Browsern betrifft, probieren Sie es selbst aus). -moz-animation: loading-moz 1s linear 0s infinite;

Lade zwei

demo02.gif

Der Effekt dieser Animation ist, dass die fünf Streifen wie Wellen schwingen. Schreiben wir unten einen solchen Effekt. Das erste ist

zweifellos ein sehr einfaches Layout HTML

<p class="box">
    <p class="loading">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </p>
</p>

Tatsächlich stimmen fast alle

Codes für diesen Effekt mit den oben genannten überein, werfen wir einen Blick darauf CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.box {
    width: 100%;
    padding: 3%;
}

.loading {
    display: flex;

    width: 30%;
    height: 250px;
    margin: 50px auto;

    border: 1px solid #699;

    justify-content: center;
    align-items: center;
}

.loading i {
    position: relative;

    width: 6px;
    height: 32px;
    margin-right: 6px;

    border-radius: 3px;
    background-color: #699;
}

Die einzige zusätzliche Codezeile hier ist das

-Attribut in .loader i. Warum gibt es so eine zusätzliche Zeile? Da wir 5 margin-right-Tags haben, überlappen sich alle Tags, wenn in dieser Zeile keine Attributeinstellung vorhanden ist. Der nächste Schritt besteht darin, den Animationseffekt festzulegen.i

@-webkit-keyframes loading {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(.5);
    }
    100% {
        transform: scaleY(1);
    }
}

.loading i:first-child {
    -webkit-animation: loading 1s linear .1s infinite;
}

.loading i:nth-child(2) {
    -webkit-animation: loading 1s linear .2s infinite;
}
.loading i:nth-child(3) {
    -webkit-animation: loading 1s linear .3s infinite;
}
.loading i:nth-child(4) {
    -webkit-animation: loading 1s linear .4s infinite;
}
.loading i:last-child {
    -webkit-animation: loading 1s linear .5s infinite;
}

可见我们设置的动画效果就是在 50% 的时候，将元素沿着 Y 轴进行缩放。然后我们对每一个i 标签进行了动画设定，不同的是每一个标签中的动画延迟执行时间不同，这样就可以达到波浪的效果，还有一点值得注意的是，我们发现我们指定的 动画速度曲线不同了，其实这个地方我们有必要了解一下所有可能的取值，如下

linear  动画从头到尾的速度是相同的。
ease    默认。动画以低速开始，然后加快，在结束前变慢。 
ease-in 动画以低速开始。    
ease-out    动画以低速结束。
ease-in-out 动画以低速开始和结束。

Loading Three

demo03.gif

这次要做的效果是动态转圈加载的效果，下面来看看如何实现这里的 HTML 代码和以上两个可能有点差别，这里多了一个 p 标签，目的是让画出的图形能够居中。

<p class="box">
    <p class="loader">
        <p class="loading">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </p>
    </p>
</p>

看看 CSS 代码

    .box {
            width: 100%;
            padding: 3%;
     }

    .loader {
        width: 30%;
        height: 250px;
        margin: 10px auto;
        border: 1px solid chocolate;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .loading {
        position: relative;
    }

    .loading i {
        display: block;
        width: 15px;
        height: 15px;
        background-color: #333333;
        border-radius: 50%;
        position: absolute;
    }

要理解为什么这些代码会画出如图所示的图形，那么我们必须要对 position 属性有一个透彻的了解，首先我们来看看我们用到的两个属性值是什么意思.

absolute    
  生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
  元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative    
  生成相对定位的元素，相对于其正常位置进行定位。
  因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

知道了意思，再来分析以上的代码，我们在loading 元素中定义了一个 position:relative 由于没有相应的内容将其撑起，所以这个时候loading 实际上为中心的一个点，然后我们将 i 标签设置为绝对定位，也就是围绕着这个点进行画圆即可。下面来看看画圆的代码

.loading i:nth-child(1) {
    top: 25px;
    left: 0px;
}

.loading i:nth-child(2) {
    top: 17px;
    left: 17px;
}

.loading i:nth-child(3) {
    top: 0px;
    left: 25px;
}

.loading i:nth-child(4) {
    top: -17px;
    left: 17px;
}

.loading i:nth-child(5) {
    top: -25px;
    left: 0px;
}

.loading i:nth-child(6) {
    top: -17px;
    left: -17px;
}

.loading i:nth-child(7) {
    top: 0px;
    left: -25px;
}

.loading i:nth-child(8) {
    top: 17px;
    left: -17px;
}

看到这些代码，如果你不知道为什么这样能够画出一个圆，那么拿出草稿纸，画一个坐标轴，将上述代码中的 top 值作为 y 轴的值，将 left 的值作为 x 轴的值，就可以看到为什么这么书写代码了。好了，静态图像已经书写完毕，那么接下来就是定义动画的时间了

  @-webkit-keyframes loading {
        50%{
            transform: scale(0.4);
            opacity: 0.3;
        }
        100%{
            transform: scale(1);
            opacity: 1;
        }
    }

opacity 属性用于设置元素的透明度。所以说我们的动画效果就是将元素缩小为 0.4 倍并且将透明度设置成 0.3。然后为每个 i 标签指定动画效果，从上到下依次为

 -webkit-animation: loading 1s ease 0s infinite;
 -webkit-animation: loading 1s ease 0.12s infinite;
 -webkit-animation: loading 1s ease 0.24s infinite;
 -webkit-animation: loading 1s ease 0.36s infinite;
 -webkit-animation: loading 1s ease 0.48s infinite;
 -webkit-animation: loading 1s ease 0.60s infinite;
 -webkit-animation: loading 1s ease 0.72s infinite;
 -webkit-animation: loading 1s ease 0.84s infinite;

这个时候如果运行，你会发现好像是逆时针旋转的，如果想改成顺时针旋转，可以将延迟时间前面都加上负号。好了，今天先介绍这三种加载效果，如果书写有错误，欢迎反馈交流。

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－css视频教程

Das obige ist der detaillierte Inhalt vonTeilen Sie die Beispielcodes von 3 Laden von Designs in CSS3 (1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!