How to achieve wave effect with pure CSS3? This article will introduce to you how to use SVG and CSS animation to create wave effects. I hope it will be helpful to you!

## With the continuous development and advancement of front-end technology, the style requirements and aesthetics of interface interaction are getting higher and higher. CSS3 animations are added to many web page interactions. Here The author shares with you a CSS3 wave effect that must be mastered in front-end development. Learn it quickly and add it to the bottom of the web page you develop to add a lively atmosphere to the page ~ [Recommended learning:

css video tutorial]

---

CSS3 wave effect

## This is a wave effect created using SVG and CSS animation , the upper part is a blue (can be modified to other colors) gradient background color, and the lower part is waves. There are four waves that are constantly undulating back and forth, very realistic. This wave effect can be used at the bottom of most pages to add a bit of liveliness to the page. .

1.Html construction

The code is as follows (example):

7c9d85888ff445deb5b0a51ca634498c

Fill blue (can be modified to other colors) gradient background color1431eb25a37e2a6aac99f7b4d6d6b2f7
This part is the svg of the wave. There are four waves that are undulating back and forth. The effect is very realistic

 
 
简单的 CSS3 波浪效果
 
 
  
 

2. CSS writingThe code is as follows (example):

Here, the

animation

animation property ofCSS3is used to control the four lines to fluctuate back and forth, forming a wave effect

.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. Complete code

index.html file

      
  
 
 
简单的 CSS3 波浪效果
 
 
  
 
  

style.css file

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

(Learning video sharing:

web front-end

)

The above is the detailed content of How to achieve wave effect with pure CSS3? (code example). For more information, please follow other related articles on the PHP Chinese website!