Heim > Artikel > Web-Frontend > Erstellen Sie mit HTML/CSS interessante dynamische, wellenförmige Textzeilen

Erstellen Sie mit HTML/CSS interessante dynamische, wellenförmige Textzeilen

藏色散人Original: 2021-08-27 14:37:242307Durchsuche

Im vorherigen Artikel „Sehr praktisch!“ CSS implementiert den dynamischen Effekt des Drückens beim Klicken auf eine Schaltfläche. „In „CSS stellen wir vor, wie man CSS verwendet, um den dynamischen Effekt des Drückens beim Klicken auf eine Schaltfläche zu erzielen In diesem Artikel erfahren Sie, wie jeder mit HTML/CSS einen interessanten dynamischen Welleneffekt für Textzeilen erstellt!

Sehen wir uns das vollständige Codebeispiel unten an:

<!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>

Der Effekt ist wie folgt:

Sie können den obigen Code direkt kopieren und die Demonstration lokal ausführen. GIF 2021-8-27 星期五下午 2-30-58.gif

Hier sind einige Schlüsselattribute:

Das Texttransformationsattribut steuert die Groß-/Kleinschreibung von Text. Das Attribut

animation ist ein Kurzattribut:

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

Animationen können über die @keyframes-Regel erstellt werden.

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

Die chinesische PHP-Website-Plattform verfügt über viele Video-Lehrressourcen. Willkommen zum Erlernen des „

CSS-Video-Tutorials

“!

Das obige ist der detaillierte Inhalt vonErstellen Sie mit HTML/CSS interessante dynamische, wellenförmige Textzeilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit HTML + CSS einen Karusselleffekt (Code-Sharing) erzielen.Nächster Artikel：Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit HTML + CSS einen Karusselleffekt (Code-Sharing) erzielen.

In Verbindung stehende Artikel

Mehr sehen