CSS animation으로 놀아 버리다- wave ver.2-
오늘은 파도를 표현하고 싶습니다.
day2 하지만 파도를 표현했습니다만, 지금은 개인적으로 디자인이 납득하고 있지 않기 때문에,
다시 도전하고 싶습니다.
1. 완성판
2. 왜 Wave?
마지막 기사를 참조하십시오.
(유체 디자인을 이용한 SPA에 도입하기 위해서입니다.)
3. 참고문헌
여기 입니다.
Youtube에는 이러한 동영상이 몇 개나 타고 있어 매우 공부가 되고 있습니다.
4. 분해해 본다
❶.
먼저 파도를 만듭니다.
이번은 sketch가 아니라, 무료로 등록해 바삭바삭 사용할 수 있는 Figma 로 씁니다.
하지만 디자인 초보자의 내가
베지어 곡선을 잘 쓸 수 없는 ~~~
갑자기 무리입니다.
여기 을 보면서, 연습해, 만들었습니다.
1시간 연습 결과:
2시간 격투한 성과:
파도가 3개 됐습니다. 그러면 이 PNG 이미지가 화면에 표시됩니다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section>
<div class="wave">
</div>
</section>
</body>
</html>
styles.cssbody{
margin: 0;
padding: 0;
}
section{
width: 100%;
height: 100vh;
}
.wave{
position: absolute;
width:100%;
height: 165px;
bottom: 0;
left: 0;
background: url('../img/wave1.png');
background-size: cover;
}
했습니다.
❷.
그런 다음 움직입니다.
styles.css.wave{
position: absolute;
width:100%;
height: 165px;
bottom: 0;
left: 0;
background: url('../img/wave1.png');
background-size: cover;
animation: animate 10s linear infinite;
}
@keyframes animate{
0%{
background-position: 0;
}
100%{
background-position: 1193px;
}
}
뭔가 이상한 형태의 파도가 하나 있습니다. .
걱정하지 마세요.
포인트는 2개 있고,・background-size :cover다운로드한 이미지의 종횡비는 그대로, 배경을 제대로 덮는 최소 사이즈가 되도록 설정되어 있는 것.
・background-position: 1193px;이것은 이미지의 width를 설정하는 것입니다.
❸.
두 개의 이미지를 놓고 애니메이션 설정
styles.css.wave:before{
content: '';
position: absolute;
width:100%;
height: 165px;
top: 0;
left: 0;
background: url('../img/wave2.png');
background-size: cover;
opacity: 0.4;
animation: animate-reverse 10s linear infinite;
}
@keyframes animate{
0%{
background-position: 0;
}
100%{
background-position: 1193px;
}
}
@keyframes animate-reverse{
0%{
background-position: 1193px;
}
100%{
background-position: 0;
}
}
포인트는 두・animate-reverse で逆に動かすことと· background position 을 반대로 설정하고 나오는 두 개의 이미지를 좌우 반대로 설정합니다.
❹.
이미지 세 번째를 애니메이션으로 설정합니다.
첫 번째와 같은 방향으로 천천히 진행하도록 설정한다
styles.css.wave:after{
content: '';
position: absolute;
width:100%;
height: 165px;
top: 0;
left: 0;
background: url('../img/wave3.png');
background-size: cover;
opacity: 0.4;
animation: animate 20s linear infinite
마침내 완성되었습니다.
그래, 뭔가 말하고 싶은 거야?
···
파도가 이상한 형태로 미묘하네요!
베이지 곡선, 곡자입니다! 연습해요~
그럼 또~
Reference
이 문제에 관하여(CSS animation으로 놀아 버리다- wave ver.2-), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/duka/items/38858d93438f25831d12
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
마지막 기사를 참조하십시오.
(유체 디자인을 이용한 SPA에 도입하기 위해서입니다.)
3. 참고문헌
여기 입니다.
Youtube에는 이러한 동영상이 몇 개나 타고 있어 매우 공부가 되고 있습니다.
4. 분해해 본다
❶.
먼저 파도를 만듭니다.
이번은 sketch가 아니라, 무료로 등록해 바삭바삭 사용할 수 있는 Figma 로 씁니다.
하지만 디자인 초보자의 내가
베지어 곡선을 잘 쓸 수 없는 ~~~
갑자기 무리입니다.
여기 을 보면서, 연습해, 만들었습니다.
1시간 연습 결과:
2시간 격투한 성과:
파도가 3개 됐습니다. 그러면 이 PNG 이미지가 화면에 표시됩니다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section>
<div class="wave">
</div>
</section>
</body>
</html>
styles.cssbody{
margin: 0;
padding: 0;
}
section{
width: 100%;
height: 100vh;
}
.wave{
position: absolute;
width:100%;
height: 165px;
bottom: 0;
left: 0;
background: url('../img/wave1.png');
background-size: cover;
}
했습니다.
❷.
그런 다음 움직입니다.
styles.css.wave{
position: absolute;
width:100%;
height: 165px;
bottom: 0;
left: 0;
background: url('../img/wave1.png');
background-size: cover;
animation: animate 10s linear infinite;
}
@keyframes animate{
0%{
background-position: 0;
}
100%{
background-position: 1193px;
}
}
뭔가 이상한 형태의 파도가 하나 있습니다. .
걱정하지 마세요.
포인트는 2개 있고,・background-size :cover다운로드한 이미지의 종횡비는 그대로, 배경을 제대로 덮는 최소 사이즈가 되도록 설정되어 있는 것.
・background-position: 1193px;이것은 이미지의 width를 설정하는 것입니다.
❸.
두 개의 이미지를 놓고 애니메이션 설정
styles.css.wave:before{
content: '';
position: absolute;
width:100%;
height: 165px;
top: 0;
left: 0;
background: url('../img/wave2.png');
background-size: cover;
opacity: 0.4;
animation: animate-reverse 10s linear infinite;
}
@keyframes animate{
0%{
background-position: 0;
}
100%{
background-position: 1193px;
}
}
@keyframes animate-reverse{
0%{
background-position: 1193px;
}
100%{
background-position: 0;
}
}
포인트는 두・animate-reverse で逆に動かすことと· background position 을 반대로 설정하고 나오는 두 개의 이미지를 좌우 반대로 설정합니다.
❹.
이미지 세 번째를 애니메이션으로 설정합니다.
첫 번째와 같은 방향으로 천천히 진행하도록 설정한다
styles.css.wave:after{
content: '';
position: absolute;
width:100%;
height: 165px;
top: 0;
left: 0;
background: url('../img/wave3.png');
background-size: cover;
opacity: 0.4;
animation: animate 20s linear infinite
마침내 완성되었습니다.
그래, 뭔가 말하고 싶은 거야?
···
파도가 이상한 형태로 미묘하네요!
베이지 곡선, 곡자입니다! 연습해요~
그럼 또~
Reference
이 문제에 관하여(CSS animation으로 놀아 버리다- wave ver.2-), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/duka/items/38858d93438f25831d12
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
❶.
먼저 파도를 만듭니다.
이번은 sketch가 아니라, 무료로 등록해 바삭바삭 사용할 수 있는 Figma 로 씁니다.
하지만 디자인 초보자의 내가
베지어 곡선을 잘 쓸 수 없는 ~~~
갑자기 무리입니다.
여기 을 보면서, 연습해, 만들었습니다.
1시간 연습 결과:
2시간 격투한 성과:
파도가 3개 됐습니다. 그러면 이 PNG 이미지가 화면에 표시됩니다.
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section>
<div class="wave">
</div>
</section>
</body>
</html>
styles.css
body{
margin: 0;
padding: 0;
}
section{
width: 100%;
height: 100vh;
}
.wave{
position: absolute;
width:100%;
height: 165px;
bottom: 0;
left: 0;
background: url('../img/wave1.png');
background-size: cover;
}
했습니다.
❷.
그런 다음 움직입니다.
styles.css
.wave{
position: absolute;
width:100%;
height: 165px;
bottom: 0;
left: 0;
background: url('../img/wave1.png');
background-size: cover;
animation: animate 10s linear infinite;
}
@keyframes animate{
0%{
background-position: 0;
}
100%{
background-position: 1193px;
}
}
뭔가 이상한 형태의 파도가 하나 있습니다. .
걱정하지 마세요.
포인트는 2개 있고,
・background-size :cover다운로드한 이미지의 종횡비는 그대로, 배경을 제대로 덮는 최소 사이즈가 되도록 설정되어 있는 것.・background-position: 1193px;이것은 이미지의 width를 설정하는 것입니다. ❸.
두 개의 이미지를 놓고 애니메이션 설정
styles.css
.wave:before{
content: '';
position: absolute;
width:100%;
height: 165px;
top: 0;
left: 0;
background: url('../img/wave2.png');
background-size: cover;
opacity: 0.4;
animation: animate-reverse 10s linear infinite;
}
@keyframes animate{
0%{
background-position: 0;
}
100%{
background-position: 1193px;
}
}
@keyframes animate-reverse{
0%{
background-position: 1193px;
}
100%{
background-position: 0;
}
}
포인트는 두
・animate-reverse で逆に動かすことと· background position 을 반대로 설정하고 나오는 두 개의 이미지를 좌우 반대로 설정합니다.❹.
이미지 세 번째를 애니메이션으로 설정합니다.
첫 번째와 같은 방향으로 천천히 진행하도록 설정한다
styles.css
.wave:after{
content: '';
position: absolute;
width:100%;
height: 165px;
top: 0;
left: 0;
background: url('../img/wave3.png');
background-size: cover;
opacity: 0.4;
animation: animate 20s linear infinite
마침내 완성되었습니다.
그래, 뭔가 말하고 싶은 거야?
···
파도가 이상한 형태로 미묘하네요!
베이지 곡선, 곡자입니다! 연습해요~
그럼 또~
Reference
이 문제에 관하여(CSS animation으로 놀아 버리다- wave ver.2-), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/duka/items/38858d93438f25831d12텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
