코드랩 레퍼런스
Animation - dog 본문
See the Pen dog by Webstoryboy (@webstoryboy) on CodePen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding: 0; margin: 0;}
.dog-wrapper {
position: absolute; height: 100vh; width: 100%;
background-color: #2b333f; overflow: hidden;
}
.dog-wrap {
position: relative;
height: 80%; width: 90%; max-width: 820px;
top: 0%; padding-top: 5%;
margin: auto;
transform: scale(1);
transition: all 1s;
}
@media (max-width:480px){
.dog-container {
transform: scale(0.8);
width: 100%;
max-width: 300px;
padding-top: 0%;
}
}
.dog-container {
position: absolute;
bottom:-10px; left: 20%;
width: 195px; height: 253px;
transform: scale(0.9);
z-index:100;
}
.dog-head-front {
position: absolute; right: 0; bottom:0;
background-color: #ff9a29;
width: 100px; height: 100%;
border-top-right-radius: 60px;
border-top-left-radius: 60px;
border-bottom-right-radius: 120px;
}
.ears {
position: absolute; width: 100%;
}
.ear {
position: absolute;
top: -18px;
height: 80px; width: 25px;
background-color: #ff9a29;
}
.left-ear {
left: 0; border-top-right-radius: 40px;
}
.right-ear {
right: 0; border-top-left-radius: 40px;
}
.eyes {
position: absolute;
top: 25px; right: 22px;
width: 100%; height: 9px;
transform: rotatex(39deg);
animation :eyes 2s cubic-bezier(1,0,0,1) infinite;
}
@keyframes eyes {
0% {right: -2px; transform:rotatex(3deg)}
50% {right: 22px; transform:rotatex(39deg)}
100% {right: -2px; transform:rotatex(3deg)}
}
.eye {
position: absolute;
background-color: #111;
width: 12px; height: 100%;
border-top-left-radius : 10px;
border-top-right-radius : 10px;
}
.left-eye {left: 30px; }
.right-eye {left: 75px;}
.dog-mouth {
position: absolute;
top: 44px;
width: 100%; height: 42px;
}
.dog-mouth-base {
position: absolute;
right: 45px;
width: 65px; height: 100%;
background-color: #fff7ee;
border-top-left-radius: 0px;
border-top-right-radius: 20px;
border-bottom-left-radius: 38px;
border-bottom-right-radius: 42px;
animation :dogmouse 2s cubic-bezier(1,0,0,1) infinite;
}
@keyframes dogmouse {
0% {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 38px;
border-bottom-right-radius: 42px;
right: -10px;
}
20% {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 38px;
border-bottom-right-radius: 42px;
}
25% {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 38px;
border-bottom-right-radius: 42px;
width: 64px;
}
30% {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 42px;
border-bottom-right-radius: 42px;
width: 65px;
}
45% {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 42px;
border-bottom-right-radius: 42px;
}
50% {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 42px;
border-bottom-right-radius: 42px;
right: 46px;
}
55% {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 42px;
border-bottom-right-radius: 42px;
}
70% {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 42px;
border-bottom-right-radius: 42px;
width: 64px;
}
75% {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 42px;
border-bottom-right-radius: 42px;
}
90% {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 42px;
border-bottom-right-radius: 42px;
}
100% {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 42px;
border-bottom-right-radius: 42px;
right: -10px;
width: 65px;
}
}
.dog-nose-black {
position: absolute;
right: 49px; top: 0;
width: 17px; height: 14px;
background-color: #000000;
border-bottom-right-radius: 38px;
animation: dognose 2s cubic-bezier(1,0,0,1) infinite;
}
@keyframes dognose {
0% {
border-radius: 0%;
border-bottom-left-radius: 38px;
border-bottom-right-radius: 0;
right: 0%; width: 17px;}
5% {
border-bottom-left-radius: 38px;
border-bottom-right-radius: 38px;
}
25% {width: 23px;}
30% {width: 17px;}
45% {
border-bottom-left-radius: 18px;
border-bottom-right-radius: 38px;
}
50% {
border-radius: 0%;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 38px;
right: 79%;
}
65% {
border-radius: 0%;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
}
95% {
border-radius: 0%;
border-bottom-left-radius: 38px;
border-bottom-right-radius: 0px;
}
100% {
border-radius: 0%;
border-bottom-left-radius: 38px;
border-bottom-right-radius: 0px;
right: -3%;
}
}
.dog-collar {
position: absolute;
top: 92px;
width: 100%;
height: 10px;
background-color: #c64f3c;
}
.dog-back-torso {
position: absolute;
bottom:0; right: 70px;
height: 60%; width: 100px;
background-color: #ff9a29;
border-top-left-radius: 180px;
transform: skew(-10deg);
}
.front-left-leg {
position: absolute;
right: 0; bottom: 0;
width: 32px; height: 126px;
background-color: #fa9028;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
.front-left-foot {
position: absolute;
bottom: 0; left: 0;
width: 35px; height: 22px;
background-color: #f1f1f1;
border-radius: 50%;
transform: skew(20deg) rotate(-22deg);
}
.front-right-leg {
position: absolute;
bottom: 0; right: 39px;
width: 32px; height: 89px;
background-color: #fa9028;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
.front-right-foot {
position: absolute;
left: 4px; bottom: 0;
width: 35px; height: 22px;
background-color: #f1f1f1;
border-radius: 50%;
transform: skew(20deg) rotate(-22deg);
}
.dog-back-tail {
position: absolute;
left: 0; bottom: 0;
width: 24.5px; height: 114px;
background-color: #ff9a29;
}
.curve1 {
position: absolute;
top: -38px; left: -28px;
width: 12px; height: 70px;
border: 22px solid #ff9a29;
border-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 32px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
transform: skew(0deg) rotate(-1deg) rotatey(1deg) skewy(-26deg);
}
.curve2 {
position: absolute;
top: -23px; left: -27px;
width: 14px; height: 9px;
border: 12px solid #ff9a29;
border-radius: 1000px;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
transform: skew(-7deg) rotate(-74deg) rotatey(1deg) skewy(-2deg) scale(2);
animation: tailcurve 150ms linear infinite;
}
@keyframes tailcurve {
0% {top: -23px;}
50% {top: -27px;}
100% {top: -23px;}
}
.curve3 {
position: absolute;
top: -34px; left: -15px;
width: 0px; height: 14px;
border: 15px solid #ff9a29;
border-top-left-radius: 0;
border-top-right-radius: 32px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
}
.end {
position: absolute;
top: -43px; left: -27px;
width: 20px; height: 24px;
background-color: #f1f1f2;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
transform: skew(-2deg) rotate(-12deg);
animation: tailcurve2 150ms linear infinite;
}
@keyframes tailcurve2 {
0% {top: -43px;}
50% {top: -48px;}
100% {top: -43px;}
}
.back-leg {
position: absolute;
left: 41px; bottom: 9px;
width: 31px; height: 41px;
background: #ff9a29;
border: 4px solid #e48121;
border-left-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
border-top-right-radius: 54px;
transform: skew(11deg) rotate(41deg);
}
.back-leg-foot {
position: absolute;
left: 4px; bottom: -9px;
width: 46px; height: 29px;
background: #f1f1f1;
border-radius: 50%;
transform: skew(-15deg) skewX(18deg) rotate(-49deg);
}
.ground {
position: absolute;
width: 100%; height: 12px;
background-color: #020303;
bottom: -2px;
border-radius: 20px;
z-index: 110;
}
.moon-container {
position: absolute;
top: 5%; right: -7%;
width: 310px; height: 330px;
opacity: 1;
}
.moon-glow {
opacity: 0.5;
}
.glow2 {
position: absolute;
width: 340px; height: 340px;
top: -20px; left: -10px;
background-color: #f1f1f1;
border-radius: 50%;
opacity: 0.1;
transition : opacity 0.3s;
animation: glow 3s 0.5s infinite;
}
@keyframes glow {
0% {transform: scale(1);}
50% {transform: scale(1.1);}
100% {transform: scale(1);}
}
.glow1 {
position: absolute;
width: 260px; height: 260px;
top: 20px; left: 30px;
background-color: #f1f1f1;
border-radius: 50%;
opacity: 0.1;
transition : opacity 0.3s;
animation: glow 3s infinite;
}
.moon-center {
position: absolute;
width: 160px; height: 160px;
background-color: #d2e8e6;
left: 80px; top: 70px;
border-radius: 50%;
}
.moon-scars {
position: absolute;
width: 70px; height: 120px;
top: 0; left: 10px;
}
.moon-scars .scars1 {
position: absolute;
width: 17px; height: 17px;
background-color: #cadad6;
top: 23px; left: 33px;
border-radius: 50%;
}
.moon-scars .scars2 {
position: absolute;
width: 30px; height: 30px;
background-color: #cadad6;
top: 48px; left: 0px;
border-radius: 50%;
}
.moon-scars .scars3 {
position: absolute;
width: 20px; height: 20px;
background-color: #cadad6;
top: 90px; left: 14px;
border-radius: 50%;
}
.stars {
position: absolute;
width: 100%; height: 42%;
top: 0; left: 0; right: 0;
}
.stars .star {
position: relative;
background: #f1f1f1;
border-radius: 50%;
animation: twinkle 2s ease-in-out infinite;
}
@keyframes twinkle {
0% {opacity:1;}
50% {opacity:0.5;}
100% {opacity:1;}
}
.stars .star:nth-of-type(1) {
top: 45%; left: 66%; width: 6px; height: 6px;
animation-delay: 2s;
}
.stars .star:nth-of-type(2) {
top: 70%; left: 48%; width: 5px; height: 5px;
animation-delay: 4s;
}
.stars .star:nth-of-type(3) {
top: 4%; left: 44%; width: 3px; height: 3px;
animation-delay: 1s;
}
.stars .star:nth-of-type(4) {
top: 23%; left: 53%; width: 1px; height: 1px;
animation-delay: 2s;
}
.stars .star:nth-of-type(5) {
top: 26%; left: 93%; width: 3px; height:3px;
animation-delay: 1.3s;
}
.stars .star:nth-of-type(6) {
top: 46%; left: 13%; width: 4px; height:4px;
animation-delay: 2.3s;
}
.stars .star:nth-of-type(7) {
top: 66%; left: 34%; width: 2px; height:2px;
animation-delay: 1.3s;
}
.stars .star:nth-of-type(8) {
top: 36%; left: 3%; width: 3px; height:3px;
animation-delay: 3.3s;
}
.stars .star:nth-of-type(9) {
top: 76%; left: 54%; width: 1px; height:1px;
animation-delay: 2.3s;
}
.stars .star:nth-of-type(10) {
top: 56%; left: 24%; width: 3px; height:3px;
animation-delay: 1.3s;
}
.stars .star:nth-of-type(11) {
top: 76%; left: 25%; width: 3px; height:3px;
animation-delay: 0.3s;
}
.stars .star:nth-of-type(12) {
top: 56%; left: 55%; width: 1px; height:1px;
animation-delay: 2.31s;
}
.stars .star:nth-of-type(13) {
top: 36%; left: 35%; width: 3px; height:3px;
animation-delay: 1.31s;
}
.stars .star:nth-of-type(14) {
top: 86%; left: 45%; width: 2px; height:2px;
animation-delay: 2.31s;
}
.stars .star:nth-of-type(15) {
top: 82%; left: 85%; width: 3px; height:3px;
animation-delay: 0.31s;
}
.stars .star:nth-of-type(16) {
top: 81%; left: 15%; width: 1px; height:1px;
animation-delay: 1.31s;
}
.stars .star:nth-of-type(17) {
top: 83%; left: 35%; width: 3px; height:3px;
animation-delay: 2.31s;
}
.stars .star:nth-of-type(18) {
top: 23%; left: 55%; width: 2px; height:2px;
animation-delay: 1.31s;
}
.stars .star:nth-of-type(19) {
top: 53%; left: 50%; width: 1px; height:1px;
animation-delay: 1.31s;
}
.stars .star:nth-of-type(20) {
top: 83%; left: 20%; width: 1px; height:1px;
animation-delay: 1.51s;
}
.shooting-star {
position: absolute;
top: 0; height: 51%;
width: 55%;
}
.shooting {
position: relative;
height: 80px; width: 2px;
background-color: #ffffff;
box-shadow: 0px 0px 30px #fff;
opacity: 0;
top:-20%; left:-20%;
transform-origin: 10% 0%;
transform: rotate(130deg) scale(0);
animation:shooting 3s 1.5s ease-in infinite;
}
@keyframes shooting {
0% {
height: 20px; opacity: 1;
top:-20%; left: -20%;
transform: rotate(130deg) scale(1);
}
25% {
height: 120px; opacity: 1;
transform: rotate(130deg) scale(1);
}
30% {
height: 0px;
top:110%; left: 100%;
}
35% {
height: 0px;
transform: rotate(130deg) scale(1);
}
50% {
height: 0px; opacity:1;
top:110%; left: 100%;
transform: rotate(130deg) scale(0);
}
100% {
opacity:0;
}
}
.dog-kennel {
position: absolute;
bottom: 0; left: 27%;
width: 344px; height: 271px;
z-index:90;
}
.roof-left {
position: absolute;
width: 253px; height: 141px;
top: 0; left: -16px;
background-color: #1e4857;
transform: skewx(-33deg);
border-right: 8px solid #4d4a55;
border-bottom: 8px solid #4d4a55;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.roof-right {
position: absolute;
width: 292px; height: 140px;
top: 0; left: 37px;
background-color: #1a3140;
transform: skew(30deg);
border-top-left-radius: 100%;
border-bottom-right-radius: 12px;
border-right: 8px solid #4d4a55;
border-top: 8px solid #4d4a55;
}
.roof-right .wall {
position: absolute;
height: 140px; width: 240px;
top: 0; left: 32px;
background-color: #8c2c1f;
transform: skewx(0deg);
border-bottom-right-radius: 16px;
}
.wall-left {
position: absolute;
bottom: 0;
width: 180px; height: 83%;
background-color: #622224;
border-top-left-radius: 5px;
}
.wall-right {
position: absolute;
bottom: 0; right: -1px;
width: 165px; height: 49%;
background-color: #8c2c1f;
}
.wall-right .door {
position: relative;
height: 81%; width: 70%;
top: 6%; left: 25px;
background-color: #642220;
border-radius: 50%;
box-shadow: -14px 0 0 #5e2c2d inset;
}
.back-hill {
position: absolute;
height: 250px; width: 400px;
background-color: #1f2731;
bottom: 0; right: 5%;
border-top-left-radius: 500px;
border-top-right-radius: 500px;
}
.hill1 {
position: absolute;
width: 20px; height: 239px;
left: 120px; bottom: 183px;
background-color: #1f2731;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
transform: perspective(164px) rotatex(78deg) translate3d(0px, 18px, -42px);
}
.hill2 {
position: absolute;
width: 28px; height: 255px;
left: 229px; bottom: 259px;
background-color: #1f2731;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
transform: perspective(164px) rotatex(78deg) translate3d(0px, 18px, -42px);
}
.hill3 {
position: absolute;
width: 28px; height: 246px;
left: 334px; bottom: 211px;
background-color: #1f2731;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
transform: perspective(164px) rotatex(78deg) translate3d(0px, 18px, -42px);
}
</style>
</head>
<body>
<div class="dog-wrapper">
<div class="dog-wrap">
<div class="stars">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div class="shooting-star">
<div class="shooting"></div>
</div>
<div class="moon-container">
<div class="moon-glow">
<div class="glow2"></div>
<div class="glow1"></div>
</div>
<div class="moon-center">
<div class="moon-scars">
<div class="scars1"></div>
<div class="scars2"></div>
<div class="scars3"></div>
</div>
</div>
</div>
<div class="dog-container">
<div class="front-left-leg">
<div class="front-left-foot"></div>
</div>
<div class="dog-back-torso"></div>
<div class="dog-head-front">
<div class="ears">
<div class="left-ear ear"></div>
<div class="right-ear ear"></div>
</div>
<div class="eyes">
<div class="left-eye eye"></div>
<div class="right-eye eye"></div>
</div>
<div class="dog-mouth">
<div class="dog-mouth-base">
<div class="dog-nose-black"></div>
</div>
</div>
<div class="dog-collar"></div>
</div>
<div class="dog-back-tail">
<div class="curve1"></div>
<div class="curve2"></div>
<div class="curve3"></div>
<div class="end"></div>
</div>
<div class="back-leg">
<div class="back-leg-foot"></div>
</div>
<div class="front-right-leg">
<div class="front-right-foot"></div>
</div>
</div>
<div class="hill">
<div class="hill1"></div>
<div class="hill2"></div>
<div class="hill3"></div>
</div>
<div class="back-hill"></div>
<div class="dog-kennel">
<div class="roof-right">
<div class="wall"></div>
</div>
<div class="wall-left"></div>
<div class="wall-right">
<div class="door"></div>
</div>
<div class="roof-left">
</div>
</div>
<div class="ground"></div>
</div>
</div>
</body>
</html>
Share
Ad
Comments