Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel)

Wie erzielt man einen Welleneffekt mit reinem CSS3? In diesem Artikel erfahren Sie, wie Sie mit SVG- und CSS-Animationen Welleneffekte erstellen.

Mit der kontinuierlichen Entwicklung und dem Fortschritt der Front-End-Technologie werden die Stilanforderungen und die Ästhetik der Schnittstelleninteraktion immer höher. Hier wird der Autor etwas mit Ihnen teilen Ein CSS3-Welleneffekt muss beherrscht werden. Erlernen Sie ihn schnell und fügen Sie ihn am Ende der von Ihnen entwickelten Webseite ein, um der Seite eine lebendige Atmosphäre zu verleihen ~ [Empfohlenes Lernen: CSS-Video-Tutorial]

---

CSS3-Welleneffekt

Dies ist ein Welleneffekt, der mithilfe einer SVG- und CSS-Animation erstellt wurde. Der obere Teil ist eine blaue Hintergrundfarbe (kann in andere Farben geändert werden) und der untere Teil ist eine Welle. Es gibt vier Wellen, die sich ständig hin und her bewegen, was sehr realistisch ist. Dieser Welleneffekt kann am unteren Rand der meisten Seiten verwendet werden, um der Seite etwas Lebendigkeit zu verleihen. .

1.HTML-Konstruktion

Der Code lautet wie folgt (Beispiel):

7c9d85888ff445deb5b0a51ca634498c Blauen Verlaufshintergrund füllen (kann in andere Farben geändert werden). Farbe
1431eb25a37e2a6aac99f7b4d6d6b2f7Dieser Teil ist das SVG der Wellen, die sich ständig hin und her bewegen. Der Effekt ist sehr realistisch

2 Der Code lautet wie folgt (Beispiel):

Hier wird das Animationsattribut

animation

von

CSS3 verwendet, um die vier Linien so zu steuern, dass sie hin und her schwanken und einen Welleneffekt bilden

 
		<div class="header">
			<div class="inner-header flex">
				<h1>简单的 CSS3 波浪效果</h1>
			</div>
			<div>
				<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
					viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
					<defs>
						<path id="gentle-wave"
							d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
					</defs>
					<g class="parallax">
						<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
						<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
						<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
						<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
					</g>
				</svg>
			</div>
		</div>

3. Vollständiger Code

index.html-Datei

 
 .header {
    position: relative;
    text-align: center;
    background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
/* 	background: #FFAFBD;  
	background: -webkit-linear-gradient(to right, #ffc3a0, #FFAFBD);  
	background: linear-gradient(to right, #ffc3a0, #FFAFBD); 
 */
    color: white;
}
 
 
.inner-header {
    height: 65vh;
    width: 100%;
    margin: 0;
    padding: 0;
}
 
 
 
.waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px; /*Fix for safari gap*/
    min-height: 100px;
    max-height: 150px;
}
 
.content {
    position: relative;
    height: 20vh;
    text-align: center;
    background-color: white;
}
 
.content a {
    margin: 0 5px;
    font-size: 12px;
    color: #333;
}
 
.content a:hover {
    color: #000;
}
 
/* Animation */
 
.parallax > use {
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}
.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}
@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
    .waves {
        height: 40px;
        min-height: 40px;
    }
    .content {
        height: 30vh;
    }
    h1 {
        font-size: 24px;
    }
}

style.css-Datei

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简单的CSS3波浪效果演示_dowebok</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<div class="inner-header flex">
<h1>简单的 CSS3 波浪效果</h1>
</div>

<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave"
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g>
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
</g>
</svg>
</div>
</div>
 
 
</body>
</html>

(Lernvideo-Sharing:

Web-Frontend

)

Das obige ist der detaillierte Inhalt vonWie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!