순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? (코드 예)
- 青灯夜游앞으로
- 2022-06-28 13:39:443151검색
순수한 CSS3를 사용하여 물결 효과를 얻는 방법은 무엇입니까? 이 기사에서는 SVG 및 CSS 애니메이션을 사용하여 물결 효과를 만드는 방법을 소개합니다. 도움이 되길 바랍니다.
프론트 엔드 기술의 지속적인 개발과 발전으로 인해 인터페이스 상호 작용의 스타일 요구 사항과 미학이 점점 더 높아지고 있습니다. 여기에서 저자는 CSS3 애니메이션에 추가되는 내용을 알려드리겠습니다. CSS3 웨이브 효과를 마스터해야 합니다. 빨리 배우고 개발하는 웹페이지 하단에 추가하여 페이지에 생동감 넘치는 분위기를 더해보세요~ [추천 학습: css 비디오 튜토리얼]
CSS3 물결 효과
SVG와 CSS 애니메이션을 이용하여 만든 물결 효과입니다. 위쪽 부분은 파란색(다른 색상으로 변경 가능) 그라데이션 배경색이고 아래쪽 부분은 물결 모양입니다. 끊임없이 앞뒤로 물결치는 4개의 파도가 있어 매우 사실적입니다. 이 물결 효과는 대부분의 페이지 하단에 사용되어 페이지에 약간의 생동감을 더할 수 있습니다. .
1.Html 구성
코드는 다음과 같습니다(예).
7c9d85888ff445deb5b0a51ca634498c 파란색 채우기(다른 색상으로 변경 가능) 그라데이션 배경 color
1431eb25a37e2a6aac99f7b4d6d6b2f7파도 svg입니다. 앞뒤로 끊임없이 물결치는 파도가 있습니다. 효과가 매우 현실적입니다
<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. 코드는 다음과 같습니다. 전체 코드
index.html 파일
.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 파일
<!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>
(학습 영상 공유: 웹 프론트엔드)
위 내용은 순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!