Partagez les exemples de codes de trois conceptions de chargement en CSS3 (2)-tutoriel CSS-php.cn

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

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

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>

Copier après la connexion

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;

    }

Copier après la connexion

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;
        }
    }

Copier après la connexion

Laissez-moi vous expliquer ce que signifie cette animation.

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

Copier après la connexion

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;
    }

Copier après la connexion

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

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

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>

Copier après la connexion

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;
    }

Copier après la connexion

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);
        }
    }

Copier après la connexion

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

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

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>

Copier après la connexion

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;
    }

Copier après la connexion

À 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;
        }
    }

Copier après la connexion

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% ： 图形回到起始位置。

Copier après la connexion

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;
    }

Copier après la connexion

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

【Recommandations associées】

Tutoriel vidéo CSS en ligne gratuit

Manuel CSS en ligne

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!