본문 바로가기

TUTORIAL


CSS Animation

CSS Animation - Rock Animation [SCSS]

CSS Animation 튜토리얼입니다. CSS3를 이용한 애니메이션과 사이트에 필요한 모션에 대해서 배우는 튜토리얼입니다.


사용프로그램
codepen GO


CSS Reference GO

CSS Animation GO

JS Animation GO

Parallax Animation GO

Codepen Webstoryboy GO

인스타그램 보기 GO

포폴 만들기 스터디 모임 GO


웹 퍼블리셔가 되기 위한 튜토리얼 순서
1. 웹 표준 사이트 만들기(2019) GO
2. 반응형 사이트 만들기(2019) GO
3. 메가박스 사이트 만들기(2019) - 디자인 GO
4. 메가박스 사이트 만들기(2019) - 코딩 GO
...추후 제공

+ 웹디자인 기능사 GO
+ CSS Animation GO
+ Parallax GO
+ Image Slider GO

기본 애니메이션
Basic01 Bar Animation GO
Basic02 Dot Animation GO
Basic03 Wave Animation GO
Basic04 Cube Animation GO
Basic05 Tail Animation GO

HoverEffect01 Animation GO
HoverEffect02 Animation GO
HoverEffect03 Animation GO
HoverEffect04 Animation GO
HoverEffect05 Animation GO

Motion01 Tentacle Animation GO
Motion02 Minion Animation GO
Motion03 Rock Animation GO
Motion04 Rocket Animation GO
Motion05 Rocket(tween) Animation GO

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,900&display=swap" rel="stylesheet">

<p class="webs">WEBS</p>
<div class="hand">
    <div class="palm">
        <div class="bone"></div>
        <div class="palm-shadow"></div>
    </div>
    <div class="thumb-base"></div>
    <div class="molile-shadow"></div>
    <div class="mobile">
        <div class="screensaver"></div>
    </div>
    <div class="finger finger-5">
        <div class="finger-shadow"></div>
    </div>
    <div class="finger finger-4">
        <div class="fingernail"></div>
    </div>
    <div class="finger finger-3">
        <div class="fingernail"></div>
    </div>
    <div class="finger finger-2">
        <div class="finger-shadow"></div>
    </div>
    <div class="finger finger-1">
        <div class="fingernail"></div>
    </div>
</div>
    










    













































$cream: #fedcca;
$bg: #eb4f5c;
*{box-sizing: border-box;}

body {
    height: 100vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: $bg;
}
.webs {
    font-family: 'Montserrat';
    font-size: 200px;
    font-weight: 900;
    color: #d4304b;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%,-50%);
}
.hand {
    width: 100px; height: 100px;
    position: relative;
    animation: rockit .8s ease infinite alternate;
}
@keyframes rockit {
    0%   {transform: translatey(30px) rotate(-45deg);}
    100% {transform: translatey(30px) rotate(10deg);}
}
.palm {
    width: 125px; height: 140px;
    background: $cream;
    transform: rotate(26deg);
    box-shadow: inset 0 0 50px #e77f7b;
    &:after {
        content: '';
        width: 20px; height: 30px;
        background: #f2ada1;
        position: absolute; left: -20px; bottom: 25px;
        z-index: 5;
        border-radius: 0 0 0 100% / 50%;
    }
    &:before {
        content: '';
        background-image: linear-gradient(-180deg, #e56c4c 0%, #f68e60 100%);
        width: 100%; height: 30px;
        border-radius: 50%;
        position: absolute; left: 0; bottom: -15px;
    }
}
.mobile {
    width: 260px; height: 135px;
    background: #fc617e;
    border: 4px solid #705674;
    position: absolute; top: -80px; left: 80%;
    border-width: 4px 10px 4px 10px;
    border-radius: 20px;
    transform: rotate(-5deg) translatex(-50%);
    z-index: 1;
    overflow: hidden;
}
.screensaver {
    width: 30px; height: 30px; 
    background: transparent;
    border-radius: 50%;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 
        0 0 0 30px #eee,
        0 0 0 50px #d36868,
        0 0 0 70px #71d368,
        0 0 0 100px #68cfd3;
    animation: screensaver .5s linear infinite;
}
@keyframes screensaver {
    0% {
        box-shadow: 
        0 0 0 80px #eee,
        0 0 0 120px #d36868,
        0 0 0 200px #71d368,
        0 0 0 250px #68cfd3;
    }
}
.molile-shadow {
    width: 100px; height: 50px;
    background: #c7656c;
    position: absolute; 
    bottom: 30px; left: 50%;
    transform: rotate(-5deg) translatex(-40%);
    filter: blur(10px);
}
.bone {
    width: 30px; height: 50px;
    border-radius: 50% 50% 0 0 / 20% 20% 0 0;
    background: #f5e5e9;
    position: absolute; 
    bottom: -50px; left: 50%;
    transform: translatex(-50%);
    z-index: 1;
    &:before {
        content: '';
        width: 40px; height: 40px;
        border-right: 50%;
        background: #f5e5f9;
        border-radius: 50%;
        box-shadow: inset 0 -5px 5px #ecd6da;
        position: absolute;
        bottom: -20px; right: -20px;
    }
    &:after {
        content: '';
        width: 40px; height: 40px;
        border-right: 50%;
        background: #f5e5f9;
        border-radius: 50%;
        box-shadow: inset 0 -5px 5px #ecd6da;
        position: absolute;
        bottom: -20px; left: -20px;
    }
}
.finger {
    position: absolute; width: 45px;
    background: $cream;
    border-radius: 22px;
    box-shadow: inset 11px -17px 40px #e77f7b;
}
.fingernail {
    width: 30px; height: 25px;
    background: rgba(#fdfdfd, .3);
    box-shadow: 1px 1px #e5baa7;
    border-radius: 0 0 50% 50%;
    position: absolute; 
    bottom: 10px; left: 50%;
    transform: translatex(-50%);
}
.finger-shadow {
    width: 35px; height: 50px;
    background: #c7656c;
    position: absolute; bottom: 5px; left: 50%;
    transform: translatex(-50%);
    filter: blur(10px);
}
.finger-5 {
    height: 115px;
    top: -130px; left: -15px;
    transform: rotate(2deg);
}
.finger-4 {
    height: 90px; 
    top: -100px; left: 30px;
    transform: rotate(-8px); z-index: 1;
}
.finger-3 {
    height: 105px; 
    top: -105px; left: 75px;
    transform: rotate(-8px);
    z-index: 1;
}
.finger-2 {
    height: 120px;
    top: -165px; left: 120px;
    transform: rotate(15deg);
    .finger-shadow {
        bottom: -5px;
    }
}
.finger-1 {
    height: 100px;
    top: -10px; right: -50px;
    transform: rotate(-65deg);
    z-index: 1;
    .fingernail {
        top: 10px; bottom: auto;
        transform: translatex(-50%) scale(-1);
    }
}
.thumb-base {
    width: 42px; height: 85px; 
    background-image: linear-gradient(-125deg, #e97e79 42%, #fdd8c7 77%);
    position: absolute; top: 26px; right: -51px;
    transform: rotate(50deg);
    border-radius: 17px 20px 0 79px;
}