순수한 CSS3를 사용하여 물결 효과를 얻는 방법은 무엇입니까? 이 기사에서는 SVG 및 CSS 애니메이션을 사용하여 물결 효과를 만드는 방법을 소개합니다. 도움이 되길 바랍니다.
프론트 엔드 기술의 지속적인 개발과 발전으로 인해 인터페이스 상호 작용의 스타일 요구 사항과 미학이 점점 더 높아지고 있습니다. 여기에서 저자는 CSS3 애니메이션에 추가되는 내용을 알려드리겠습니다. CSS3 웨이브 효과를 마스터해야 합니다. 빨리 배우고 개발하는 웹페이지 하단에 추가하여 페이지에 생동감 넘치는 분위기를 더해보세요~ [추천 학습:css 비디오 튜토리얼]
CSS3 물결 효과
SVG와 CSS 애니메이션을 이용하여 만든 물결 효과입니다. 위쪽 부분은 파란색(다른 색상으로 변경 가능) 그라데이션 배경색이고 아래쪽 부분은 물결 모양입니다. 끊임없이 앞뒤로 물결치는 4개의 파도가 있어 매우 사실적입니다. 이 물결 효과는 대부분의 페이지 하단에 사용되어 페이지에 약간의 생동감을 더할 수 있습니다. .
1.Html 구성
코드는 다음과 같습니다(예).
简单的 CSS3 波浪效果
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; } }
简单的CSS3波浪效果演示_dowebok 简单的 CSS3 波浪效果
(학습 영상 공유:웹 프론트엔드)
위 내용은 순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
