Partage de cinq petits effets de page Web CSS3 couramment utilisés-tutoriel CSS-php.cn

Partage de cinq petits effets de page Web CSS3 couramment utilisés

青灯夜游

Libérer： 2021-01-08 10:49:36

avant

2563 Les gens l'ont consulté

Cet article partagera avec vous 5 effets de page Web CSS3 très couramment utilisés. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Partage de cinq petits effets de page Web CSS3 couramment utilisés

Recommandation du tutoriel : Tutoriel vidéo CSS

Premier effet :

Partage de cinq petits effets de page Web CSS3 couramment utilisés

Étant donné que l'enregistrement des images GIF entraîne des pertes d'images, cela semble irrégulier et lent, mais l'effet réel est toujours bon et plus flexible.

code html :

<span class="shake">弹</span>

Copier après la connexion

code css :

.shake{
    width:40px;
    height:40px;
    display:block;
    background:lightgreen;
    border-radius:50%;
    margin:5px;
    color:#fff;
    font-size:24px;
    text-align:center;
    line-height:40px;
    cursor:pointer;
    -webkit-transition:all 0.25s;
}
.shake:hover{
    -webkit-animation:shake 0.25s;
    background: lightblue;
}
@-webkit-keyframes shake{
    0%,10%,55%,90%,94%,98%,100%{
        -webkit-transform:scale(1,1);
    }
    30%{
        -webkit-transform:scale(1.14,0.86);
    }
    75%{
        -webkit-transform:scale(0.92,1.08);
    }
    92%{
        -webkit-transform:scale(1.04,0.96);
    }
    96%{
        -webkit-transform:scale(1.02,0.98);
    }
    99%{
        -webkit-transform:scale(1.01,0.99);
    }
}

Copier après la connexion

J'ai vu une réponse sur le site de blog personnel de quelqu'un hier soir. L'effet flottant du bouton en haut ressemble à ceci. C'est assez intéressant, mais les effets d'autres personnes peuvent être meilleurs que les miens, alors autant l'essayer.

Le deuxième effet :

Partage de cinq petits effets de page Web CSS3 couramment utilisés

Cet effet est en fait utilisé par de nombreux sites Web en ligne. Oui, il est utilisé. peut être réalisé que ce soit en utilisant CSS3 ou jQuery. Alors ici, j'utilise simplement CSS3 pour y parvenir.

Code HTML :

<input class="search" type="text" placeholder="搜索...">

Copier après la connexion

Code CSS :

.search{
    width:80px;
    height:40px;
    border-radius:40px;
    border:2px solid lightblue;
    position: absolute;
    right:200px;
    outline:none;
    text-indent:12px;
    color:#666;
    font-size:16px;
    padding:0;
    -webkit-transition:width 0.5s;
}
.search:focus{
    width:200px;
}

Copier après la connexion

Habituellement, il y aura un bouton à côté, mais je je ne le ferai pas ici.

Le troisième effet :

Partage de cinq petits effets de page Web CSS3 couramment utilisés

Cet effet est également très couramment utilisé, principalement sur les sites Web personnels. beaucoup.

code html :

<div class="banner">
    <a href="javascript:;">博</a>
    <span>这是我的个人博客</span>
</div>

Copier après la connexion

code css :

.banner{
    width:234px;
    height:34px;
    border-radius:34px;
    position:absolute;
    top:400px;
    left:200px;
}
.banner a{
    display:inline-block;
    width:30px;
    height:30px;
    line-height:30px;
    border-radius:50%;
    border:2px solid lightblue;
    position:absolute;
    left:0px;top:0px;
    background:lightgreen;
    color:#fff;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    z-index:2;
}
.banner a:hover + span{
    -webkit-transform:rotate(360deg);
    opacity:1;
}
.banner span{
    display:inline-block;
    width:auto;
    padding:0 20px;
    height:34px;
    line-height:34px;
    background:lightblue;
    border-radius:34px;
    text-align: center;
    position:absolute;
    color:#fff;
    text-indent:25px;
    opacity:0;
    -webkit-transform-origin:8% center;
    -webkit-transition:all 1s;
}

Copier après la connexion

Le quatrième effet :

Partage de cinq petits effets de page Web CSS3 couramment utilisés

Cet effet d'invite est plus couramment utilisé et est utilisé par de nombreux sites Web.

code html :

<div class="banner1">
    <a href="javascript:;">博</a>
    <span>这是我的个人博客</span>
</div>

Copier après la connexion

code css :

.banner1{
    width:234px;
    height:34px;
    border-radius:40px;
    position:absolute;
    top:400px;
    left:600px;
}
.banner1 a{
    display:inline-block;
    width:30px;
    height:30px;
    line-height:30px;
    border-radius:50%;
    border:2px solid lightblue;
    position:absolute;
    left:0px;top:0px;
    background:lightgreen;
    color:#fff;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    z-index:2;
}
.banner1 a:hover + span{
    -webkit-transform:translateX(40px);
    opacity:1;
}
.banner1 span{
    display:inline-block;
    width:auto;
    padding:0 20px;
    height:30px;line-height:30px;
    background:lightblue;
    border-radius:30px;
    text-align: center;
    color:#fff;
    position:absolute;
    top:2px;
    opacity:0;
    -webkit-transition:all 1s;
    -webkit-transform:translateX(80px);
}

Copier après la connexion

Le cinquième effet :

Je suppose que ce n'est plus couramment utilisé, je le fais juste pour le plaisir. Si vous êtes intéressé, jetez un œil :

Partage de cinq petits effets de page Web CSS3 couramment utilisés

Structure HTML :

<div class="wrapper">
    <div class="round">
        <span>东邪</span>
        <span>西毒</span>
        <span>南乞</span>
        <span>北丐</span>
    </div>
</div>

Copier après la connexion

Code CSS :

.wrapper{
    width:100px;
    height:100px;
    background:lightblue;
    border-radius:50%;
    border:2px solid lightgreen;
    position: absolute;
    top:200px;
    left:400px;
    cursor:pointer;
}
.wrapper:after{
    content:&#39;你猜&#39;;
    display:inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius:50%;
    text-align:center;
    color:#fff;
    font-size:24px;
}
.wrapper:hover .round{
    -webkit-transform:scale(1);
    opacity:1;
    -webkit-animation:rotating 6s 1.2s linear infinite alternate;
}
@-webkit-keyframes rotating{
    0%{
        -webkit-transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(180deg);
    }
}
.round{
    width:240px;
    height:240px;
    border:2px solid lightgreen;
    border-radius:50%;
    position: absolute;
    top:-70px;
    left:-70px;
    -webkit-transition:all 1s;
    -webkit-transform:scale(0.35);
    opacity:0;
}
.round span{
    width:40px;
    height:40px;
    line-height:40px;
    display:inline-block;
    border-radius:50%;
    background:lightblue;
    border:2px solid lightgreen;
    color:#fff;
    text-align:center;
    position:absolute;
}
.round span:nth-child(1){
    right:-22px;
    top:50%;
    margin-top:-22px;
}
.round span:nth-child(2){
    left:-22px;
    top:50%;
    margin-top:-22px;
}
.round span:nth-child(3){
    left:50%;
    bottom:-22px;
    margin-left:-22px;
}
.round span:nth-child(4){
    left:50%;
    top:-22px;
    margin-left:-22px;
}

Copier après la connexion

Conclusion

Alors cette fois, laissez-moi partager ces quelques gadgets, j'en partagerai de meilleurs quand j'aurai le temps dans le futur.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

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!