Partagez les exemples de codes de trois conceptions de chargement en CSS3 (2)

Il s'agit du deuxième article conçu par CSS Loading. En fait, beaucoup de contenu est inclus dans le premier article, il y aura donc relativement moins d'introduction aux attributs dans cet article. Si vous ne comprenez pas les attributs, veuillez vous référer au contenu de l'article précédent.
Chargement CSS (1)

Chargement d'un

Paste_Image.png

De cette façon, ce n'est pas le cas ressemble à n'importe quoiAnimation, si je veux le montrer ici, je dois enregistrer la vidéo avec l'écran, puis la convertir en image Cela me semble trop gênant. Je ne sais pas s'il existe un moyen simple. Si c'est le cas, faites-le-moi savoir. Bon, voyons comment créer cet effet d'animation. Tout d'abord, jetons un œil au code Html

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

qui indique l'imbrication de deux balises

. . Jetons un coup d'œil au p code CSS

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

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

    .loader i {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #333333;
        position: absolute;
        opacity:0;

    }

Comme vous pouvez le voir, ces codes sont presque exactement les mêmes que ceux du premier article. En fait, il ne s'agit pas seulement de cet effet. Les trois effets suivants sont également conçus de cette manière. La seule différence est la conception de l'animation.

    @-webkit-keyframes loading {
        0%{
            transform: scale(0);
            opacity: 0;
        }
        5%{
            opacity: 1;
        }
        100%{
            transform: scale(1);
            opacity:0;
        }
    }

Laissez-moi vous expliquer ce que signifie cette animation.

1. 0% ： 这个时候将我们画的圆形缩放为 0%，透明度也是 0
2. 5% ： 这个时候将透明度设置为 1 ，也就是图形是出于可见的状态，
  但是这个时候图形已经被缩放为 0，所以还是什么东西都看不到。
3. 100% : 注意在 100 % 的状态下，图形被缩放为原始状态，但是透明度为0，这说明了什么？
  这说明在 5% - 100% 过程中，图形逐渐出现，但是透明度逐渐降低，这样就会出现一个动画效果。

Bon, maintenant que l'effet d'animation a été défini, configurons-le pour notre balise

. i

    .loader i:nth-child(1){
        -webkit-animation: loading 1s linear 0s infinite;
    }
    .loader i:nth-child(2){
        -webkit-animation: loading 1s linear 0.2s infinite;
    }
    .loader i:nth-child(3){
        -webkit-animation: loading 1s linear 0.4s infinite;
    }

D'accord, ici le premier effet d'animation apparaît. Il est recommandé de s'entraîner soi-même et de voir l'effet spécifique. Personnellement, je pense que cette animation est plutôt belle.

Chargement de deux

Paste_Image.png

Pour être honnête, c'est mon effet d'animation préféré, très intéressant. Regardez le code

Html

<p class="box">
    <p class="loader">
        <p class="loader-child">
            <i></i>
            <i></i>
        </p>
    </p>
</p>

Le code

ici est un peu différent de celui ci-dessus CSS

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

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

    .loader-child {
        width: 40px;
        height: 40px;
        position: relative;
    }

    .loader-child i {
        display: block;
        border: 2px solid #333333;
        border-color: transparent #333333; 
        border-radius: 50%;
        position: absolute;
    }

    .loader-child i:first-child {
        width: 35px;
        height: 35px;
        top: 0;
        left: 0;
        -webkit-animation: loading 1s ease-in-out 0s infinite;
    }

    .loader-child i:last-child {
        width: 15px;
        height: 15px;
        top: 10px;
        left: 10px;
        -webkit-animation: loading 1s ease-in-out 0.5s infinite reverse;
    }

On peut voir que. dans le quatrième bloc, il y a une telle ligne de code

À l'origine, nous devions dessiner un cercle. Puisque ce dont nous avons besoin n'est pas un cercle, après avoir défini cette ligne d'attributs, l'attribut de couleur sera modifié tous les 1/4 d'arc. , c'est-à-dire Changer la transparence et border-color: transparent #333333; pour obtenir l'effet graphique souhaité. #333333

De plus, nous définissons l'attribut

pour chaque balise i. Ces deux attributs doivent être utilisés conjointement avec top,left. Nous avons également présenté comment l'utiliser dans l'article précédent. ces deux attributs, l'effet obtenu est qu'un grand cercle contient un petit cercle, ce qui est l'effet sur l'image. position

Faites attention à l'effet d'animation

Nous avons ajouté un last-child à la fin, ce qui signifie une exécution dans le sens inverse des aiguilles d'une montre. reverse

D'accord, jetons un œil à l'animation

    @-webkit-keyframes loading {

        0% {
            transform: rotate(0deg) scale(1);
        }
        50% {
            transform: rotate(180deg) scale(0.6);
        }
        100% {
            transform: rotate(360deg) scale(1);
        }
    }

Quel est l'effet de l'animation Combiné avec mon analyse de l'exécution de l'animation ci-dessus, vous avez peut-être pu le faire ? simuler cette animation L'effet est, oui, un effet très cool.

Chargement trois

Paste_Image.png

Je trouve cette animation très difficile, car je suis exposé à

aussi Cela ne fait que quelques jours, et je ne sais pas pourquoi de nombreux attributs sont définis. J'ai recherché diverses informations sur Internet, et je ne les comprends toujours pas bien. Maintenant, je vais partager ce que je sais. Quant à ces attributs dont je ne suis pas encore sûr, j'espère aussi que tous les grands immortels m'apprendront. C'est toujours la même chose qu'avant, jetons d'abord un coup d'œil au code CSS HTML

<p class="box">
    <p class="loader">
        <p class="loader-child">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </p>
    </p>
</p>

On voit clairement qu'il y a une couche supplémentaire de balises

incluses ici, principalement pour coopérer. avec l'utilisation de l'attribut p. position

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

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

    .loader-child{
        width: 80px;
        height: 20px;
        position: relative;
    }

    .loader-child i{
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #333333;
        margin-right: 10px;
        position: absolute;
    }

À l'heure actuelle, bien que nous ayons 5 balises

, nous ne pouvons voir qu'un seul cercle, pas les 5 attendus. Est-ce que cela se produit ? Je n'en suis pas sûr non plus. i

Jetons un coup d'œil à l'effet d'animation

    @-webkit-keyframes loading {
        0%{
            left: 100px;
            top: 0;
        }
        80%{
            left:0;
            top:0;
        }
        85%{
            left:0px;
            top:-20px;
            width: 20px;
            height: 20px;
        }
        90%{
            width: 40px;
            height: 20px;
        }
        95%{
            left: 100px;
            top: -20px;
            width: 20px;
            height: 20px;
        }
        100%{
            left: 100px;
            top:0;
        }
    }

1. 0% - 80% ： 图形从距离父元素左边距为 100 px 的位置移动到 0 px，上边距不变，也就是水平移动。
2. 80% - 85% ： 图形的左边距不变，但是上移 20 px，而且图形的宽高设置为 20px
3. 85% - 90% :  图形的位置不变化，但是此时图形的宽拓宽到 40px
4. 90% - 95% ： 图形开始向右移动，移动100 px并且将宽复原为 20px
5. 95% - 100% ： 图形回到起始位置。

Ce qui suit consiste à définir l'effet d'animation pour chaque élément

    .loader-child i:nth-child(1){
        -webkit-animation: loading 2s linear 0s infinite;
    }
    .loader-child i:nth-child(2){
        -webkit-animation: loading 2s linear -0.4s infinite;
    }
    .loader-child i:nth-child(3){
        -webkit-animation: loading 2s linear -0.8s infinite;
    }
    .loader-child i:nth-child(4){
        -webkit-animation: loading 2s linear -1.2s infinite;
    }
    .loader-child i:nth-child(5){
        -webkit-animation: loading 2s linear -1.6s infinite;
    }

D'accord, c'est tout . Accueillez les commentaires et apprenez les uns des autres.

【Recommandations associées】

1.

Tutoriel vidéo CSS en ligne gratuit

2.

Manuel CSS en ligne

3.

php.cn Dugu Jiujian (2) - 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!