트렌디한 배경 애니메이션 같아요.
10600 단어 CSS
최종 제공 서비스
이거다.
왠지 스타일리시한 것 같아.
(개인차가 있다.)
실시
기초적인 html 준비.
씩씩하고 늠름한 자태.
index.html<!DOCTYPE html>
<html lang ="ja">
<head>
<link rel="stylesheet" href="../css/background.css">
</head>
<body>
<div class='background'>
<div class='wave -one'></div>
<div class='wave -two'></div>
<div class='wave -three'></div>
<div class='wave -four'></div>
<div class='wave -five'></div>
<div class='title'>なんかおしゃれなやつ</div>
</div>
</body>
</html>
CSS
이쪽도 시원해요.
해설은 뒤에 있다.
background.csshtml {
background: #eee;
}
.background {
width: 100%;
height: 100%;
background: lighten(#f0f4c3, 10%);
position: fixed;
overflow: hidden;
}
.wave {
opacity: .4;
position: absolute;
top: 0%;
left: 75%;
background: #0af;
width: 100%;
height: 100vh;
margin-left: -25%;
margin-top: -25%;
transform-origin: 50% 48%;
border-radius: 59%;
animation: drift 4000ms infinite linear;
}
.wave.-two {
animation: drift 5000ms infinite linear;
opacity: .1;
background: yellow;
}
.wave.-three {
animation: drift 6000ms infinite linear;
background: rgb(124, 214, 210);
}
.wave.-four {
animation: drift 7000ms infinite linear;
background: rgb(96, 212, 183);
}
.wave.-five {
animation: drift 8000ms infinite linear;
}
.box:after {
content: '';
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 11;
}
.title {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
line-height: 300px;
text-align: right;
color: white;
text-transform: uppercase;
font-family: 'Playfair Display', serif;
letter-spacing: .4em;
font-size: 24px;
text-shadow: 0 1px 0 rgba(black, .1);
text-indent: .3em;
}
@keyframes drift {
from { transform: rotate(0deg); }
from { transform: rotate(360deg); }
}
살짝 설명해주세요.
css도 거의 다 장식이네요.
중요한 건 다음 3개.
- @keyframes drift
- border-radius
- animation
- position: fiexd;
keyframes는 회전 요소의 애니메이션을 등록합니다.
그리고 모두 원이 되면 변화가 없기 때문에 세로 사이즈와border-radius로 타원을 준비합니다.
그리고 모든 타원이 같은 시간에 같은 속도로 애니메이션을 해도 아쉽기 때문에 애니메이션의 실행 시간을 1000ms씩 엇갈리게 합니다.
이후 요소가 증가할 때 스크롤해도 화면에 계속 나타나고fixed로 고정됩니다.
이렇게 하면 배경 애니메이션으로 역할을 발휘할 수 있다.
총결산
응, 유행이야.
실용적으로는 주장이 너무 강하지만 조정하면 여러 장소에서 사용할 수 있다.
Reference
이 문제에 관하여(트렌디한 배경 애니메이션 같아요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ririli/items/6940d00cab205d4b6daf
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
기초적인 html 준비.
씩씩하고 늠름한 자태.
index.html
<!DOCTYPE html>
<html lang ="ja">
<head>
<link rel="stylesheet" href="../css/background.css">
</head>
<body>
<div class='background'>
<div class='wave -one'></div>
<div class='wave -two'></div>
<div class='wave -three'></div>
<div class='wave -four'></div>
<div class='wave -five'></div>
<div class='title'>なんかおしゃれなやつ</div>
</div>
</body>
</html>
CSS
이쪽도 시원해요.
해설은 뒤에 있다.
background.css
html {
background: #eee;
}
.background {
width: 100%;
height: 100%;
background: lighten(#f0f4c3, 10%);
position: fixed;
overflow: hidden;
}
.wave {
opacity: .4;
position: absolute;
top: 0%;
left: 75%;
background: #0af;
width: 100%;
height: 100vh;
margin-left: -25%;
margin-top: -25%;
transform-origin: 50% 48%;
border-radius: 59%;
animation: drift 4000ms infinite linear;
}
.wave.-two {
animation: drift 5000ms infinite linear;
opacity: .1;
background: yellow;
}
.wave.-three {
animation: drift 6000ms infinite linear;
background: rgb(124, 214, 210);
}
.wave.-four {
animation: drift 7000ms infinite linear;
background: rgb(96, 212, 183);
}
.wave.-five {
animation: drift 8000ms infinite linear;
}
.box:after {
content: '';
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 11;
}
.title {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
line-height: 300px;
text-align: right;
color: white;
text-transform: uppercase;
font-family: 'Playfair Display', serif;
letter-spacing: .4em;
font-size: 24px;
text-shadow: 0 1px 0 rgba(black, .1);
text-indent: .3em;
}
@keyframes drift {
from { transform: rotate(0deg); }
from { transform: rotate(360deg); }
}
살짝 설명해주세요.
css도 거의 다 장식이네요.
중요한 건 다음 3개.
- @keyframes drift
- border-radius
- animation
- position: fiexd;
keyframes는 회전 요소의 애니메이션을 등록합니다.
그리고 모두 원이 되면 변화가 없기 때문에 세로 사이즈와border-radius로 타원을 준비합니다.
그리고 모든 타원이 같은 시간에 같은 속도로 애니메이션을 해도 아쉽기 때문에 애니메이션의 실행 시간을 1000ms씩 엇갈리게 합니다.
이후 요소가 증가할 때 스크롤해도 화면에 계속 나타나고fixed로 고정됩니다.
이렇게 하면 배경 애니메이션으로 역할을 발휘할 수 있다.
총결산
응, 유행이야.
실용적으로는 주장이 너무 강하지만 조정하면 여러 장소에서 사용할 수 있다.
Reference
이 문제에 관하여(트렌디한 배경 애니메이션 같아요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ririli/items/6940d00cab205d4b6daf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
