Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel)-CSS-Tutorial-php.cn

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

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

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):

Blauen Verlaufshintergrund füllen (kann in andere Farben geändert werden). Farbe

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

Nach dem Login kopieren

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;
    }
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Verwandte Etiketten：

css3

Quelle：csdn.net

Vorheriger Artikel：Eine ausführliche Untersuchung der Interaktionseffekte von CSS-Mauszeigern Nächster Artikel：CSS3-Animation in Aktion: Supercooler klebriger Blaseneffekt

Erklärung dieser Website

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

Neueste Artikel des Autors