Créez des lignes de texte ondulées dynamiques intéressantes avec HTML/CSS-tutoriel HTML-php.cn

Créez des lignes de texte ondulées dynamiques intéressantes avec HTML/CSS

藏色散人

Libérer： 2021-08-27 14:37:24

original

2292 Les gens l'ont consulté

Dans l'article précédent "Très pratique !" CSS implémente l'effet dynamique d'appuyer lorsqu'un bouton est cliqué"Dans "CSS, nous présentons comment utiliser CSS pour obtenir l'effet dynamique d'appuyer lorsqu'un bouton est cliqué"Les amis dans le besoin peuvent aller en apprendre davantage ~

Ceci. L'article vous apportera Tout le monde utilise HTML/CSS pour créer un effet de ligne de texte ondulé dynamique intéressant !

Jetons un coup d'œil à l'exemple de code complet ci-dessous :

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: rgb(74, 152, 255);
        }

        .wavy {
            position: relative;
        }

        .wavy span {
            position: relative;
            display: inline-block;
            color: #fff;
            font-size: 2em;
            text-transform: uppercase;
            animation: animate 2s ease-in-out infinite;
            animation-delay: calc(0.1s * var(--i));
        }

        @keyframes animate {
            0% {
                transform: translateY(0px);
            }

            20% {
                transform: translateY(-20px);
            }

            40%,
            100% {
                transform: translateY(0px);
            }
        }
    </style>
</head>

<body>
<div class="wavy">
    <span style="--i:1">P</span>
    <span style="--i:2">H</span>
    <span style="--i:3">P</span>
    <span style="--i:4">中</span>
    <span style="--i:5">文</span>
    <span style="--i:6">网</span>
    <span style="--i:7">开</span>
    <span style="--i:8">班</span>
    <span style="--i:9">啦</span>
    <span style="--i:10">~</span>
    <span style="--i:11">快</span>
    <span style="--i:12">学</span>
    <span style="--i:13">起</span>
    <span style="--i:14">来</span>
    <span style="--i:15">~</span>
    <span style="--i:16">~</span>
    <span style="--i:17">~</span>

</div>
</body>
</html>

Copier après la connexion

L'effet est le suivant :

GIF 2021-8-27 星期五下午 2-30-58.gif

Vous pouvez directement copier le code ci-dessus et exécuter la démonstration localement.

Voici quelques attributs clés :

L'attribut text-transform contrôle la casse du texte. L'attribut
animation est un attribut raccourci :

animation-name：规定需要绑定到选择器的 keyframe 名称。。    
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。    
animation-timing-function：规定动画的速度曲线。    
animation-delay：规定在动画开始之前的延迟。    
animation-iteration-count：规定动画应该播放的次数。    
animation-direction：规定是否应该轮流反向播放动画。

Copier après la connexion

L'animation peut être créée via la règle @keyframes.

语法：@keyframes animationname {keyframes-selector {css-styles;}}
参数animationname必需：定义动画的名称。
参数keyframes-selector必需：动画时长的百分比。
合法的值：
0-100%
from（与 0% 相同）
to（与 100% 相同）
参数css-styles必需：一个或多个合法的 CSS 样式属性。

Copier après la connexion

La plate-forme de site Web chinois PHP propose de nombreuses ressources pédagogiques vidéo, invitez tout le monde à apprendre le "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!