CSS로 웨이브 배경 만들기

CodeWithRandom 블로그에 오신 것을 환영합니다. 이 기사에서는 Html 및 Css 코딩을 사용하여 웨이브 배경을 만드는 방법을 배웁니다. Wave Background css는 CSS에서 유행하는 UI 디자인입니다.

많은 개발자들이 헤더 페이지에 웨이브 배경을 사용합니다. 많은 개발자들이 바닥글에 웨이브 배경을 사용합니다. 이제 웨이브 배경 html css 코딩을 만들어 봅시다.

Html 코드 웨이브 배경

<!--Hey! This is the original version
of Simple CSS Waves-->
<div class="header">
<!--Content before waves-->
<div class="inner-header flex">
<!--Just the logo.. Don't mind this-->
<h1>Simple CSS Waves</h1>
</div>
<!--Waves Container-->
<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>
<!--Waves end-->
</div>
<!--Header ends-->
<!--Content starts-->
<!--Content ends-->

웨이브 배경 CSS에 대한 모든 html 코드가 있습니다. 이제 css 없이 출력을 볼 수 있으며 웨이브 배경 css에 css를 작성합니다.

출력 웨이브 배경 CSS



웨이브 배경에 대한 CSS 코드

@import url(//fonts.googleapis.com/css?family=Lato:300:400);
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%);
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;
}
/* Animation */
.parallax > use {
animation: move-forever 25s cubic-bezier(.55,.5,.45,.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;
}
}

이제 웨이브 배경에 대한 CSS 섹션을 완료했습니다. 다음은 최종 업데이트된 출력 웨이브 배경 CSS입니다.

최종 출력 웨이브 배경 CSS



이제 CSS 섹션 Wave Background를 완료했습니다. 다음은 Wave Background CSS로 업데이트된 출력입니다. Wave Background CSS가 마음에 드셨기를 바랍니다. 출력 프로젝트 스크린샷을 볼 수 있습니다. 다른 블로그를 참조하고 프런트 엔드 개발에 대한 지식을 얻으십시오.

고맙습니다.

이 게시물에서는 간단한 HTML 및 CSS를 사용하여 Wave Background CSS를 만드는 방법을 배웁니다. 저희가 실수를 했거나 혼동을 드린 경우 댓글을 달아 답장을 보내거나 쉽게 배울 수 있도록 도와주세요.

작성자 – Random/Anki를 사용한 코드

코드 작성자 – Goodkatz

일부 관련 주제 -

add-to-cart-button-animation-add-to-cart-button-html-css-javascript

restaurant-website-html-css

age-calculator-javascript-age-calculator-using-html-css-javascript

dinogame-dino-game-using-html-css-javascript-chrome-dinogame

number-guessing-game-javascript-number-guess-game-javascript-game