Erstellen Sie mit HTML/CSS interessante dynamische, wellenförmige Textzeilen-HTML-Tutorial-php.cn

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

藏色散人

Freigeben： 2021-08-27 14:37:24

Original

2292 Leute haben es durchsucht

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>

Nach dem Login kopieren

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：规定是否应该轮流反向播放动画。

Nach dem Login kopieren

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 样式属性。
```
Nach dem Login kopieren
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!