Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!

Dengan perkembangan berterusan dan kemajuan teknologi bahagian hadapan, keperluan gaya dan estetika interaksi antara muka semakin tinggi dan lebih tinggi Banyak interaksi halaman web telah menambahkan animasi css3, di sini Pengarang berkongsi dengan anda kesan gelombang CSS3 yang mesti dikuasai dalam pembangunan bahagian hadapan Pelajari dengan cepat dan tambahkannya ke bahagian bawah halaman web yang anda bangunkan untuk menambah suasana yang meriah pada halaman~ [Pembelajaran yang disyorkan: tutorial video css]

---

kesan gelombang CSS3

Ini adalah gelombang kesan dicipta menggunakan animasi SVG dan CSS , bahagian atas berwarna biru (boleh diubah suai kepada warna lain) warna latar belakang kecerunan, dan bahagian bawah adalah gelombang Terdapat empat gelombang yang sentiasa beralun ke depan dan ke belakang, sangat realistik. Kesan gelombang ini boleh digunakan di bahagian bawah kebanyakan halaman untuk menambah sedikit kemeriahan pada halaman. .

1.Pembinaan HTML

Kodnya adalah seperti berikut (contoh):

Isi biru (boleh diubah suai kepada warna lain) warna latar belakang kecerunan

Bahagian ini Ia adalah svg gelombang Terdapat empat gelombang beralun ke depan dan ke belakang Kesannya sangat realistik

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

Tulisan CSS

kod Seperti berikut (contoh):

Di sini, sifat animasi animasi CSS3 digunakan untuk mengawal empat baris untuk turun naik ke belakang dan ke belakang , membentuk kesan gelombang

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

3 Kod lengkap

fail indeks.html

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

fail style.css

body {
    margin: 0;
}
 
h1 {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    letter-spacing: 2px;
    font-size: 48px;
}
p {
    font-family: 'Lato', sans-serif;
    letter-spacing: 1px;
    font-size: 14px;
    color: #333333;
}
 
.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;
}
.logo {
    width: 50px;
    fill: white;
    padding-right: 15px;
    display: inline-block;
    vertical-align: middle;
}
 
.inner-header {
    height: 65vh;
    width: 100%;
    margin: 0;
    padding: 0;
}
 
.flex {
    /*Flexbox for containers*/
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
 
.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;
    }
}

(Belajar perkongsian video: bahagian hadapan web)

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7488

15

Tutorial CakePHP

1377

52

Apakah format nama akaun stim

77

11

kunci pengaktifan win11 kekal

51

19

Sambungan NYT menunjukkan dan jawapan

19

40

Tunjukkan Lagi