In diesem Artikel erfahren Sie, wie Sie mit CSS einen Welleneffekt erstellen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
In diesem Artikel wird ein weiterer Welleneffekt vorgestellt, der mit CSS erzielt wird. Die Idee ist sehr interessant.
Warum können bestimmte Integrale zur Flächenermittlung verwendet werden?
:Wenn sich n unendlich der Unendlichkeit nähert, ist die Fläche aller Rechtecke gleich der Fläche der gekrümmten Grafiken:
Mit dieser Idee können wir auch eine Linie in CSS durch simulieren mehrere Divs Gekrümmte Kanten, also Wellenlinien.
Schritt 1. Schneiden Sie die Grafik in mehrere Teile
<div class="g-container"> <div class="g-item"></div> <div class="g-item"></div> <div class="g-item"></div> <div class="g-item"></div> <div class="g-item"></div> <div class="g-item"></div> <div class="g-item"></div> <div class="g-item"></div> <div class="g-item"></div> <div class="g-item"></div> <div class="g-item"></div> <div class="g-item"></div> </div>
flex-Layout, um es einfach anzuordnen. Holen Sie sich eine solche Grafik, jedes Unterelement hat die gleiche Höhe: .g-container {
width: 200px;
height: 200px;
border: 2px solid #fff;
display: flex;
align-items: flex-end;
}
.g-item {
flex-grow: 1;
height: 60px;
background-color: #fff;
}flex 布局，简单布局一下，得到这样一个图形，每个子元素等高：
.g-item {
flex-grow: 1;
height: 60px;
background-color: #000;
animation: heightChange 1s infinite ease-in-out alternate;
}
@keyframes heightChange {
from {
height: 60px;
}
to {
height: 90px;
}
}效果如下：
接下来，简单改造下，我们需要让这个图动起来，通过改变每个子元素的高度实现：
$count: 12;
$speed: 1s;
.g-item {
--f: #{$speed / -12};
flex-grow: 1;
height: 60px;
background-color: #000;
animation: heightChange $speed infinite ease-in-out alternate;
}
@for $i from 0 to $count {
.g-item:nth-child(#{$i + 1}) {
animation-delay: calc(var(--f) * #{$i});
}
}
@keyframes heightChange {
from {
height: 60px;
}
to {
height: 90px;
}
}效果如下：
接下来，只需要，让每个子元素的动画顺序设定一个不同时间的负延迟即可，就可以得到一个初步的波浪效果，这里为了减少工作量，我们借助 SASS 实现：
div.g-container
-for(var i=0; i<120; i++)
div.g-item这样，我们就得到了一个初步的波浪效果：
可以看到，上述的波浪动画是存在一定的锯齿的，接下来我们要做的就是尽可能的消除掉这些锯齿。
按照一开始使用定积分求曲边图形面积的思想，我们只需要尽可能增加子 div 的数量即可，当 div 的数量无穷多的时候，锯齿也就会消失不见。
我们可以尝试将上述的 12 个子 div，替换成 120 个试下，一个一个写 120 个 div 太费力了，我们这里借助 Pug 模板引擎：
// 12 -- 120
$count: 120;
$speed: 1s;
.g-item {
// 注意，只有这里发生了变化
--f: #{$speed / -120};
flex-grow: 1;
height: 60px;
background-color: #000;
animation: heightChange $speed infinite ease-in-out alternate;
}
@for $i from 0 to $count {
.g-item:nth-child(#{$i + 1}) {
animation-delay: calc(var(--f) * #{$i});
}
}对于 CSS 代码，只需要改动动画延迟的时间即可，120 个子 div 的负延迟都控制在 1s 内：
div.g-container
-for(var i=0; i<24; i++)
div.g-item这样，我们就可以得到一条比较光滑的曲线啦：
当然，实际情况，使用那么多个 div 实在是太浪费了，那么有没有其它方法在 div 数量比较少的情况下，也能够尽可能的消除锯齿呢？
这里，我们可以尝试给子元素在运动变换的过程中添加不同的 transform: skewY() 去模拟弧度。
再改造下代码，我们将 div 的数量调低，并且给每个子 div 再添加一个 transform: skewY() 的动画效果：
$count: 24;
$speed: 1s;
.g-item {
// 注意，只有这里发生了变化
--f: #{$speed / -24};
flex-grow: 1;
height: 60px;
background-color: #000;
animation:
heightChange $speed infinite ease-in-out alternate,
skewChange $speed infinite ease-in-out alternate;
}
@for $i from 0 to $count {
.g-item:nth-child(#{$i + 1}) {
animation-delay:
calc(var(--f) * #{$i}),
calc(var(--f) * #{$i} - #{$speed / 2});
}
}
@keyframes heightChange {
from {
height: var(--h);
}
to {
height: calc(var(--h) + 30px);
}
}
@keyframes skewChange {
from {
transform: skewY(20deg);
}
to {
transform: skewY(-20deg);
}
}完整的 CSS 代码如下：
rrreee为了方便理解，首先看看，高度变换动画一致的情况下，子 div 的添加了 skewY()
Schritt 2. Lassen Sie jedes untergeordnete Element die Höhentransformationsanimation mit unterschiedlichen negativen Verzögerungen ausführen
Als nächstes, einfache Transformation, müssen wir dieses Bild bewegen, indem wir die Höhe jedes untergeordneten Elements ändern:
rrreeeDer Effekt ist wie folgt:
Als nächstes müssen Sie nur noch eine negative Verzögerung unterschiedlicher Zeiten für die Animationssequenz jedes Kindes festlegen Element, und Sie können einen vorläufigen Welleneffekt erhalten: 🎜🎜
🎜
🎜
transform: skewY() hinzuzufügen, um das Bogenmaß zu simulieren. 🎜🎜 Lassen Sie uns den Code erneut transformieren. Wir werden die Anzahl der Divs reduzieren und jedem Unter-Div einen weiteren transform: skewY()-Animationseffekt hinzufügen: 🎜rrreee🎜Der vollständige CSS-Code lautet wie folgt: 🎜 rrreee 🎜Um das Verständnis zu erleichtern, werfen Sie zunächst einen Blick auf die Transformation des untergeordneten Div mit hinzugefügtem skewY(), wenn die Höhentransformationsanimation konsistent ist: 🎜🎜🎜🎜🎜Sie können sehen, wie jede Transformation erfolgt ist Für diejenigen mit offensichtlich hervorstehenden gezackten Kanten kann das Hinzufügen einer verzögerten Höhentransformation die meisten gezackten Effekte effektiv beseitigen: 🎜🎜🎜🎜🎜An diesem Punkt haben wir eine weitere Möglichkeit, gezackte Divs mit einer moderaten Anzahl von Divs zu beseitigen! Den vollständigen Code aller oben genannten Effekte finden Sie hier: 🎜CodePen – PureCSS-Welleneffekte
Schließlich können wir mehrere verschiedene Welleneffekte kombinieren, indem wir mehrere variable Parameter anpassen, um einige Kombinationseffekte zu erhalten, was ebenfalls sehr gut ist.
Ähnlich:
CodePen – PureCSS Wave Effects 2
Danach fällt mir das LOGO der Sea Group, der Muttergesellschaft unseres Unternehmens (Shopee), ein, das so aussieht:
Verwenden Sie die Lösung in diesem Artikel, um eine dynamische LOGO-Animation zu implementieren:
CodePen Demo -- PureCSS Wave - Sea Group Logo
Die Nachteile dieser Lösung liegen immer noch auf der Hand :
Autor: chokcoco
Weitere Programmierkenntnisse finden Sie unter:
Programmiervideo! !
Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Idee, CSS geschickt zu nutzen, um Welleneffekte zu erzeugen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
