css 곤충위에 마우스를 올리면 애니가 멋지게 구현됩니다.
관련링크
본문
https://codepen.io/kbrtrm/pen/grgyJe
HTML :
<div class="container">
<div class="sh sheet-1">
<div class="face">
<div class="eye left"></div>
<div class="eye right"></div>
<div class="mouth"></div>
</div>
</div>
<div class="sh sheet-2"></div>
<div class="sh sheet-3"></div>
<div class="sh sheet-4"></div>
<div class="sh sheet-5"></div>
<div class="sh sheet-6"></div>
<div class="sh sheet-7"></div>
<div class="sh sheet-8"></div>
<div class="sh sheet-9"></div>
<div class="sh sheet-10"></div>
<div class="sh sheet-11"></div>
<div class="sh sheet-12"></div>
<div class="sh sheet-13"></div>
<div class="sh sheet-14"></div>
<div class="sh sheet-15"></div>
</div>
<div class="rain-hold">
<div class="rain r1"></div>
<div class="rain r2"></div>
<div class="rain r3"></div>
<div class="rain r4"></div>
<div class="rain r5"></div>
<div class="rain r6"></div>
</div>
CSS :
.sh {
background: #fff;
display: block;
width: 50px;
height: 50px;
position: absolute;
border-radius: 50%;
}
.container {
position: relative;
width: 100%;
max-width: 300px;
margin: 0 auto;
height: 400px;
z-index: 1;
margin-top: 150px;
}
@keyframes updown {
0% {
margin-top: 0px;
}
33% {
margin-top: 15px;
}
67% {
margin-top: -15px;
}
100% {
margin-top: 0px;
}
}
.sheet-1 {
right: 15px;
top: 15px;
z-index: -10;
background: #FFC7C7;
display: block;
width: 50px;
height: 50px;
position: absolute;
transition: margin-top .25s;
transition-delay: 0.125s;
}
.container:hover .sheet-1 {
animation: updown .5s ease-in-out infinite;
animation-delay: 0s;
}
.container:hover .sheet-1 .eye {
height: 7px;
width: 7px;
}
.container:hover .sheet-1 .mouth {
height: 15px;
}
.sheet-2 {
right: 30px;
top: 30px;
z-index: -20;
background: #FFC7C7;
display: block;
width: 49px;
height: 49px;
position: absolute;
transition: margin-top .25s;
transition-delay: 0.25s;
}
.container:hover .sheet-2 {
animation: updown .5s ease-in-out infinite;
animation-delay: 0.025s;
}
.container:hover .sheet-2 .eye {
height: 7px;
width: 7px;
}
.container:hover .sheet-2 .mouth {
height: 15px;
}
.sheet-3 {
right: 45px;
top: 45px;
z-index: -30;
background: #FFC7C7;
display: block;
width: 48px;
height: 48px;
position: absolute;
transition: margin-top .25s;
transition-delay: 0.375s;
}
.container:hover .sheet-3 {
animation: updown .5s ease-in-out infinite;
animation-delay: 0.05s;
}
.container:hover .sheet-3 .eye {
height: 7px;
width: 7px;
}
.container:hover .sheet-3 .mouth {
height: 15px;
}
.sheet-4 {
right: 60px;
top: 60px;
z-index: -40;
background: #FFC7C7;
display: block;
width: 47px;
height: 47px;
position: absolute;
transition: margin-top .25s;
transition-delay: 0.5s;
}
.container:hover .sheet-4 {
animation: updown .5s ease-in-out infinite;
animation-delay: 0.075s;
}
.container:hover .sheet-4 .eye {
height: 7px;
width: 7px;
}
.container:hover .sheet-4 .mouth {
height: 15px;
}
.sheet-5 {
right: 75px;
top: 75px;
z-index: -50;
background: #FFC7C7;
display: block;
width: 46px;
height: 46px;
position: absolute;
transition: margin-top .25s;
transition-delay: 0.625s;
}
.container:hover .sheet-5 {
animation: updown .5s ease-in-out infinite;
animation-delay: 0.1s;
}
.container:hover .sheet-5 .eye {
height: 7px;
width: 7px;
}
.container:hover .sheet-5 .mouth {
height: 15px;
}
.sheet-6 {
right: 90px;
top: 90px;
z-index: -60;
background: #FFC7C7;
display: block;
width: 45px;
height: 45px;
position: absolute;
transition: margin-top .25s;
transition-delay: 0.75s;
}
.container:hover .sheet-6 {
animation: updown .5s ease-in-out infinite;
animation-delay: 0.125s;
}
.container:hover .sheet-6 .eye {
height: 7px;
width: 7px;
}
.container:hover .sheet-6 .mouth {
height: 15px;
}
.sheet-7 {
right: 105px;
top: 105px;
z-index: -70;
background: #FFC7C7;
display: block;
width: 44px;
height: 44px;
position: absolute;
transition: margin-top .25s;
transition-delay: 0.875s;
}
.container:hover .sheet-7 {
animation: updown .5s ease-in-out infinite;
animation-delay: 0.15s;
}
.container:hover .sheet-7 .eye {
height: 7px;
width: 7px;
}
.container:hover .sheet-7 .mouth {
height: 15px;
}
.sheet-8 {
right: 120px;
top: 120px;
z-index: -80;
background: #FFC7C7;
display: block;
width: 43px;
height: 43px;
position: absolute;
transition: margin-top .25s;
transition-delay: 1s;
}
.container:hover .sheet-8 {
animation: updown .5s ease-in-out infinite;
animation-delay: 0.175s;
}
.container:hover .sheet-8 .eye {
height: 7px;
width: 7px;
}
.container:hover .sheet-8 .mouth {
height: 15px;
}
.sheet-9 {
right: 135px;
top: 135px;
z-index: -90;
background: #FFC7C7;
display: block;
width: 42px;
height: 42px;
position: absolute;
transition: margin-top .25s;
transition-delay: 1.125s;
}
.container:hover .sheet-9 {
animation: updown .5s ease-in-out infinite;
animation-delay: 0.2s;
}
.container:hover .sheet-9 .eye {
height: 7px;
width: 7px;
}
.container:hover .sheet-9 .mouth {
height: 15px;
}
.sheet-10 {
right: 150px;
top: 150px;
z-index: -100;
background: #FFC7C7;
display: block;
width: 41px;
height: 41px;
position: absolute;
transition: margin-top .25s;
transition-delay: 1.25s;
}
.container:hover .sheet-10 {
animation: updown .5s ease-in-out infinite;
animation-delay: 0.225s;
}
.container:hover .sheet-10 .eye {
height: 7px;
width: 7px;
}
.container:hover .sheet-10 .mouth {
height: 15px;
}
.sheet-11 {
right: 165px;
top: 165px;
z-index: -110;
background: #FFC7C7;
display: block;
width: 40px;
height: 40px;
position: absolute;
transition: margin-top .25s;
transition-delay: 1.375s;
}
.container:hover .sheet-11 {
animation: updown .5s ease-in-out infinite;
animation-delay: 0.25s;
}
.container:hover .sheet-11 .eye {
height: 7px;
width: 7px;
}
.container:hover .sheet-11 .mouth {
height: 15px;
}
.sheet-12 {
right: 180px;
top: 180px;
z-index: -120;
background: #FFC7C7;
display: block;
width: 39px;
height: 39px;
position: absolute;
transition: margin-top .25s;
transition-delay: 1.5s;
}
.container:hover .sheet-12 {
animation: updown .5s ease-in-out infinite;
animation-delay: 0.275s;
}
.container:hover .sheet-12 .eye {
height: 7px;
width: 7px;
}
.container:hover .sheet-12 .mouth {
height: 15px;
}
.sheet-13 {
right: 195px;
top: 195px;
z-index: -130;
background: #FFC7C7;
display: block;
width: 38px;
height: 38px;
position: absolute;
transition: margin-top .25s;
transition-delay: 1.625s;
}
.container:hover .sheet-13 {
animation: updown .5s ease-in-out infinite;
animation-delay: 0.3s;
}
.container:hover .sheet-13 .eye {
height: 7px;
width: 7px;
}
.container:hover .sheet-13 .mouth {
height: 15px;
}
.sheet-14 {
right: 210px;
top: 210px;
z-index: -140;
background: #FFC7C7;
display: block;
width: 37px;
height: 37px;
position: absolute;
transition: margin-top .25s;
transition-delay: 1.75s;
}
.container:hover .sheet-14 {
animation: updown .5s ease-in-out infinite;
animation-delay: 0.325s;
}
.container:hover .sheet-14 .eye {
height: 7px;
width: 7px;
}
.container:hover .sheet-14 .mouth {
height: 15px;
}
.sheet-15 {
right: 225px;
top: 225px;
z-index: -150;
background: #FFC7C7;
display: block;
width: 36px;
height: 36px;
position: absolute;
transition: margin-top .25s;
transition-delay: 1.875s;
}
.container:hover .sheet-15 {
animation: updown .5s ease-in-out infinite;
animation-delay: 0.35s;
}
.container:hover .sheet-15 .eye {
height: 7px;
width: 7px;
}
.container:hover .sheet-15 .mouth {
height: 15px;
}
.face {
position: relative;
}
.face .eye {
height: 1px;
width: 7px;
background: #000;
border-radius: 50%;
transform: rotate(-12deg);
}
.face .eye.left {
position: absolute;
left: 15px;
top: 15px;
}
.face .eye.right {
position: absolute;
right: 5px;
top: 10px;
}
.face .mouth {
height: 1px;
width: 30px;
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 0px 0px 90px 90px;
background: #000;
transform: rotate(-12deg);
top: 27px;
left: 16px;
position: absolute;
}
body {
overflow: hidden;
/* lightning animation */
-webkit-animation: flash 8s linear infinite;
-moz-animation: flash linear 8s infinite;
-o-animation: flash linear 8s infinite;
animation: flash linear 8s infinite;
background: #000;
}
.rain-hold {
transform: rotate(55deg);
}
.rain {
position: absolute;
width: 3004px;
/* (2560 + 1244) */
height: 4800px;
top: -5800px;
left: -1844px;
}
body:hover {
/* Two waves of nearby rain */
/* Two waves of mid-distant rain */
/* Two waves of distant rain */
}
body:hover .r1 {
-webkit-animation: fall 2.2s infinite linear;
-moz-animation: fall 2.2s infinite linear;
-o-animation: fall 2.2s infinite linear;
animation: fall 2.2s infinite linear;
background: url(https://raw.githubusercontent.com/bryanbraun/after-dark-css/gh-pages/img/rain-tile-near.png) repeat;
}
body:hover .r2 {
-webkit-animation: fall 2.2s 1s infinite linear;
-moz-animation: fall 2.2s 1s infinite linear;
-o-animation: fall 2.2s 1s infinite linear;
animation: fall 2.2s 1s infinite linear;
background: url(https://raw.githubusercontent.com/bryanbraun/after-dark-css/gh-pages/img/rain-tile-near.png) repeat;
}
body:hover .r3 {
-webkit-animation: fall 4s infinite linear;
-moz-animation: fall 4s infinite linear;
-o-animation: fall 4s infinite linear;
animation: fall 4s infinite linear;
background: url(https://raw.githubusercontent.com/bryanbraun/after-dark-css/gh-pages/img/rain-tile-mid.png) repeat;
}
body:hover .r4 {
-webkit-animation: fall 4.5s 3.2s infinite linear;
-moz-animation: fall 4.5s 3.2s infinite linear;
-o-animation: fall 4.5s 3.2s infinite linear;
animation: fall 4.5s 3.2s infinite linear;
background: url(https://raw.githubusercontent.com/bryanbraun/after-dark-css/gh-pages/img/rain-tile-mid.png) repeat;
}
body:hover .r5 {
-webkit-animation: fall 6s infinite linear;
-moz-animation: fall 6s infinite linear;
-o-animation: fall 6s infinite linear;
animation: fall 6s infinite linear;
background: url(https://raw.githubusercontent.com/bryanbraun/after-dark-css/gh-pages/img/rain-tile-distant.png) repeat;
}
body:hover .r6 {
-webkit-animation: fall 6s 4s infinite linear;
-moz-animation: fall 6s 4s infinite linear;
-o-animation: fall 6s 4s infinite linear;
animation: fall 6s 4s infinite linear;
background: url(https://raw.githubusercontent.com/bryanbraun/after-dark-css/gh-pages/img/rain-tile-distant.png) repeat;
}
/**
* Falling rain animation
* Assumes a max screen resolution of 2560px x 1600px.
* Rain falls the size of the div + the estimated
* height of the screen (1600 max). 4800 + 1600 = 6400.
*
* Making the rain fall straight down is easier for ensuring there is always
* rain on the screen. However I can preserve the angle of falling rain with
* a translateY of 1244px.
*/
@-webkit-keyframes fall {
from {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(1244px, 6400px);
-moz-transform: translate(1244px, 6400px);
-o-transform: translate(1244px, 6400px);
-ms-transform: translate(1244px, 6400px);
transform: translate(1244px, 6400px);
}
}
@-moz-keyframes fall {
from {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(1244px, 6400px);
-moz-transform: translate(1244px, 6400px);
-o-transform: translate(1244px, 6400px);
-ms-transform: translate(1244px, 6400px);
transform: translate(1244px, 6400px);
}
}
@-o-keyframes fall {
from {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(1244px, 6400px);
-moz-transform: translate(1244px, 6400px);
-o-transform: translate(1244px, 6400px);
-ms-transform: translate(1244px, 6400px);
transform: translate(1244px, 6400px);
}
}
@keyframes fall {
from {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(1244px, 6400px);
-moz-transform: translate(1244px, 6400px);
-o-transform: translate(1244px, 6400px);
-ms-transform: translate(1244px, 6400px);
transform: translate(1244px, 6400px);
}
}
페이지 정보
[ 조회 72회 ] 작성일18-06-13 11:04