CSS animation에서 놀아 넘어뜨리는 - rain -
하루 1 qiita는 매우 힘들다.
오늘은 비를 표현하고 싶습니다.
1. 완성판
2. 왜 rain?
유체 디자인이 유행한다고 생각하고, 그 디자인이 왜 멋진지 생각하고, 유체의 움직임이 자연계의 움직임과 비슷하기 때문이라고 생각했습니다.
즉, 자연을 느끼는 것과 디자인과의 궁합은 좋은 것이라고 생각했습니다.
향후 병원 안에 예술이나 animation을 도입할 때 비나 구름이라든지, 나무잎이 바람으로 흔들리는 느낌 등을 표현할 수 있으면 환자나 직원이 치유된다고 생각했습니다.
그러고 보니 요 전날 TV에 나왔습니다.
저 녀석 지금 뭐하고 있니? 이라는 프로그램입니다.
간호사로 vvvv를 구사하고 있는, 메디컬 디자인 엔지니어 요시오카씨와 협력해 주셔, 병원에 디지털 아트를 도입한 것이 취재되었습니다. 앞으로도, 향후의 의료계를 위해서(때문에), 서로 절기 연마해, 격려해 갑니다.
병원 외래 진찰실에서
3. 참고 문헌
4. 분해해 본다
❶.
우선 비의 이미지를 얻습니다.
여기 가 좋을 것 같습니다.
회원등록하여 비의 소재를 입수합니다.
❷.
그럼, 코드를 써 갑니다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="rain">
</div>
</body>
</html>
styles.cssbody {
margin: 0;
padding: 0;
background-color: black;
}
.rain {
height: 100vh;
background: url('../img/rain.png');
}
밤의 경치에 비가 흔들렸다.
❸.
애니메이션을 설정합니다.
styles.css.rain {
height: 100vh;
background: url('../img/rain.png');
animation: rain 0.3s linear infinite;
}
@keyframes rain {
0%{
background-position: 20% 100%;
}
100%{
background-position: 0% 0%;
}
}
포인트는
background-position背景画像の初期位置を、background-positionで設定することで、雨が動きます값이 두 개의 구문을 사용하여 X, Y의 위치를 어긋나게 할 수 있습니다.
❹.
마지막으로 번개를 설정합시다.
styles.css.rain:before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #fff;
animation: lightening 4s linear infinite;
opacity: 0;
}
@keyframes lightening {
0%{
opacity: 0;
}
10%{
opacity:0;
}
11%{
opacity: 1;
}
14%{
opacity:0;
}
20%{
opacity:0;
}
21%{
opacity:1;
}
26%{
opacity:0;
}
100%{
opacity:0;
}
}
완성되었습니다.
이런 겉보기 굉장한 동영상도, 분해해 보면 따위 일은 없는 기술의, 중첩으로 할 수 있네요.
그럼 또~
Reference
이 문제에 관하여(CSS animation에서 놀아 넘어뜨리는 - rain -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/duka/items/70ebb3d209d080dc5cfb
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
유체 디자인이 유행한다고 생각하고, 그 디자인이 왜 멋진지 생각하고, 유체의 움직임이 자연계의 움직임과 비슷하기 때문이라고 생각했습니다.
즉, 자연을 느끼는 것과 디자인과의 궁합은 좋은 것이라고 생각했습니다.
향후 병원 안에 예술이나 animation을 도입할 때 비나 구름이라든지, 나무잎이 바람으로 흔들리는 느낌 등을 표현할 수 있으면 환자나 직원이 치유된다고 생각했습니다.
그러고 보니 요 전날 TV에 나왔습니다.
저 녀석 지금 뭐하고 있니? 이라는 프로그램입니다.
간호사로 vvvv를 구사하고 있는, 메디컬 디자인 엔지니어 요시오카씨와 협력해 주셔, 병원에 디지털 아트를 도입한 것이 취재되었습니다. 앞으로도, 향후의 의료계를 위해서(때문에), 서로 절기 연마해, 격려해 갑니다.
병원 외래 진찰실에서
3. 참고 문헌
4. 분해해 본다
❶.
우선 비의 이미지를 얻습니다.
여기 가 좋을 것 같습니다.
회원등록하여 비의 소재를 입수합니다.
❷.
그럼, 코드를 써 갑니다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="rain">
</div>
</body>
</html>
styles.cssbody {
margin: 0;
padding: 0;
background-color: black;
}
.rain {
height: 100vh;
background: url('../img/rain.png');
}
밤의 경치에 비가 흔들렸다.
❸.
애니메이션을 설정합니다.
styles.css.rain {
height: 100vh;
background: url('../img/rain.png');
animation: rain 0.3s linear infinite;
}
@keyframes rain {
0%{
background-position: 20% 100%;
}
100%{
background-position: 0% 0%;
}
}
포인트는
background-position背景画像の初期位置を、background-positionで設定することで、雨が動きます값이 두 개의 구문을 사용하여 X, Y의 위치를 어긋나게 할 수 있습니다.
❹.
마지막으로 번개를 설정합시다.
styles.css.rain:before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #fff;
animation: lightening 4s linear infinite;
opacity: 0;
}
@keyframes lightening {
0%{
opacity: 0;
}
10%{
opacity:0;
}
11%{
opacity: 1;
}
14%{
opacity:0;
}
20%{
opacity:0;
}
21%{
opacity:1;
}
26%{
opacity:0;
}
100%{
opacity:0;
}
}
완성되었습니다.
이런 겉보기 굉장한 동영상도, 분해해 보면 따위 일은 없는 기술의, 중첩으로 할 수 있네요.
그럼 또~
Reference
이 문제에 관하여(CSS animation에서 놀아 넘어뜨리는 - rain -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/duka/items/70ebb3d209d080dc5cfb
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
❶.
우선 비의 이미지를 얻습니다.
여기 가 좋을 것 같습니다.
회원등록하여 비의 소재를 입수합니다.
❷.
그럼, 코드를 써 갑니다.
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="rain">
</div>
</body>
</html>
styles.css
body {
margin: 0;
padding: 0;
background-color: black;
}
.rain {
height: 100vh;
background: url('../img/rain.png');
}
밤의 경치에 비가 흔들렸다.
❸.
애니메이션을 설정합니다.
styles.css
.rain {
height: 100vh;
background: url('../img/rain.png');
animation: rain 0.3s linear infinite;
}
@keyframes rain {
0%{
background-position: 20% 100%;
}
100%{
background-position: 0% 0%;
}
}
포인트는
background-position
背景画像の初期位置を、background-positionで設定することで、雨が動きます값이 두 개의 구문을 사용하여 X, Y의 위치를 어긋나게 할 수 있습니다.❹.
마지막으로 번개를 설정합시다.
styles.css
.rain:before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #fff;
animation: lightening 4s linear infinite;
opacity: 0;
}
@keyframes lightening {
0%{
opacity: 0;
}
10%{
opacity:0;
}
11%{
opacity: 1;
}
14%{
opacity:0;
}
20%{
opacity:0;
}
21%{
opacity:1;
}
26%{
opacity:0;
}
100%{
opacity:0;
}
}
완성되었습니다.
이런 겉보기 굉장한 동영상도, 분해해 보면 따위 일은 없는 기술의, 중첩으로 할 수 있네요.
그럼 또~
Reference
이 문제에 관하여(CSS animation에서 놀아 넘어뜨리는 - rain -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/duka/items/70ebb3d209d080dc5cfb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
