Comment obtenir un effet de vague avec du CSS3 pur ? (exemple de code)

Comment obtenir un effet de vague en utilisant du CSS3 pur ? Cet article vous présentera comment utiliser l'animation SVG et CSS pour créer des effets de vagues. J'espère que cela vous sera utile !

Avec le développement et les progrès continus de la technologie front-end, les exigences de style et l'esthétique de l'interaction avec l'interface sont de plus en plus élevées. De nombreuses interactions de pages Web sont ajoutées avec l'animation CSS3. Ici, l'auteur partagera avec vous quelque chose qui. doit être maîtrisé en développement front-end. Un effet de vague CSS3, apprenez-le rapidement et ajoutez-le au bas de la page Web que vous développez pour ajouter une atmosphère animée à la page ~ [Apprentissage recommandé : Tutoriel vidéo CSS]

---

Effet de vague CSS3

Il s'agit d'un effet de vague créé à l'aide d'une animation SVG et CSS. La partie supérieure est une couleur d'arrière-plan dégradé bleu (peut être modifié en d'autres couleurs), et la partie inférieure est une vague. Il y a quatre vagues qui ondulent constamment d'avant en arrière, ce qui est très réaliste. Cet effet de vague peut être utilisé au bas de la plupart des pages pour ajouter un peu de vivacité à la page. .

1.Construction HTML

Le code est le suivant (exemple) :

Remplir le fond dégradé en bleu (peut être modifié en d'autres couleurs) color

Cette partie est le svg des vagues. Il y a quatre vagues qui ondulent constamment d'avant en arrière L'effet est très réaliste

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

2.

Le code est le suivant (exemple) :

Ici, la propriété d'animation

animation de CSS3 est utilisée pour contrôler les quatre lignes pour fluctuer d'avant en arrière, formant un effet de vague

 
 .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. Code complet

fichier index.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>

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

(Partage de vidéos d'apprentissage :

front-end web)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：

css3

source：csdn.net

Article précédent：Une exploration approfondie des effets d'interaction du pointeur de la souris CSS Article suivant：Animation CSS3 en action : effet de bulle collante super cool

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

• Comprendre la sentinelle dans Redis en profondeur
  2023-04-26 17:59:18
• [Organisation et partage] 7 outils de gestion d'état React populaires
  2023-04-26 17:47:48
• Un article discute de la différence entre la clé dans Vue2 et la clé dans Vue3
  2023-04-26 17:41:42
• Un article pour parler du contrôle de la mémoire dans Node
  2023-04-26 17:37:05
• Partager des compétences pratiques sur Excel : 4 astuces pour supprimer les valeurs en double !
  2023-04-26 17:31:25
• Partager des compétences pratiques sur Word : la fonction de conversion simplifié vers traditionnel peut être utilisée de cette manière !
  2023-04-26 17:27:32
• Comment résoudre les problèmes cross-domaines ? Une brève analyse des solutions courantes
  2023-04-25 19:57:58
• Un article pour comprendre le modèle singleton en JavaScript
  2023-04-25 19:53:11
• En savoir plus sur les tampons dans Node
  2023-04-25 19:49:11
• Découvrez comment écrire des tests unitaires dans Vue3
  2023-04-25 19:41:54

Derniers numéros

Rendre la page adaptée aux mobiles ? J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'ut...

Depuis 2024-04-01 20:42:38

0

1

259

Rubriques connexes

Plus>

• tutoriel CSS3
• Quelles sont les propriétés du dégradé CSS3 ?
• Que faire si le jeton de connexion n'est pas valide
• Le système d'exploitation Hongmeng de Huawei est-il Android ?
• Comment résoudre le problème de l'absence de processeur d'impression
• Quelles sont les vulnérabilités courantes de Tomcat ?
• Solution à l'erreur de socket 10054
• Plateforme formelle de trading de devises numériques