by Jeoney Kim

HTML+CSS 루돌프 만들기
2018년 12월 25일에 업데이트됨

by Jeoney Kim

크리스마스 루돌프 만들기 웹 기술로 움직이는 루돌프 만들기

웹 기술을 이용하여 다양하게 재미있는 작업을 할 수 있어요!~
이 재미있는 작업에 여러분도 도전해보세요^^

코딩으로 실습해보기

  • HTML

    <div class="rudolph">

    <div class="antlers left"></div>

    <div class="antlers right"></div>

    <div class="ears left">

    <div class="inner"></div>

    </div>

    <div class="ears right">

    <div class="inner"></div>

    </div>

    <div class="face">

    <div class="eyes left">

    <div class="pupil"></div>

    </div>

    <div class="eyes right">

    <div class="pupil"></div>

    </div>

    </div>

    <div class="chin">

    <div class="nose">

    <div class="inner"></div>

    </div>

    </div>

    </div>

  • CSS설명보기

    /* Animations */CSS3 기술만으로 애니메이션 구현이 가능하다 / 단, IE 호환성 문제가 있으니 염두에 두고 사용할 것!

    @keyframes nose {

    0% {

    transform: scale(1);

    }

    100% {

    background-color: #bf1d20;

    top: -5px;

    transform: scale(0.95);

    box-shadow: 15px 15px 15px orange inset;

    }

    }

    @keyframes nose-light {

    0% {

    background-color: #fff;

    }

    100% {

    background-color: #ffa19a;

    }

    }

    @keyframes rudolph {

    0% {

    top: -15px;

    }

    100% {

    top: 0px;

    }

    }

    /* Design Area */여기서 부터 실제 디자인하는 영역

    body {

    background-color: #4e3636;

    }

    .rudolph {

    animation: rudolph 1s infinite alternate;

    width: 400px;

    height: 400px;

    margin: 300px auto 0;

    position: relative;

    }

    .antlers {

    width: 25px;

    height: 200px;

    position: absolute;

    background-color: #b98845;

    border-radius: 20px;

    }

    .antlers.left:before {

    content: ' ';

    position: absolute;

    width: 25px;

    height: 70px;

    background-color: #b98845;

    border-radius: 20px;

    transform: rotate(-45deg);

    left: -20px;

    top: 80px;

    }

    .antlers.left {

    left: 120px;

    top: -170px;

    transform: rotate(-15deg);

    }

    .antlers.left:after {

    content: ' ';

    position: absolute;

    width: 25px;

    height: 100px;

    background-color: #b98845;

    border-radius: 20px;

    transform: rotate(35deg);

    left: 20px;

    top: 50px;

    }

    .antlers.right:before {

    content: ' ';

    position: absolute;

    width: 25px;

    height: 100px;

    background-color: #b98845;

    border-radius: 20px;

    transform: rotate(-35deg);

    left: -25px;

    top: 50px;

    }

    .antlers.right {

    right: 120px;

    top: -170px;

    transform: rotate(15deg);

    }

    .antlers.right:after {

    content: ' ';

    position: absolute;

    width: 25px;

    height: 70px;

    background-color: #b98845;

    border-radius: 20px;

    transform: rotate(45deg);

    left: 20px;

    top: 80px;

    }

    .ears {

    width: 50px;

    height: 60px;

    position: absolute;

    z-index: -1;

    background-color: #d6ab66;

    border-radius: 40% 40% 50% 50%;

    }

    .ears.left {

    left: 75px;

    transform: rotate(-40deg);

    }

    .ears.right {

    right: 75px;

    transform: rotate(40deg);

    }

    .ears .inner {

    width: 35px;

    height: 45px;

    background-color: #b36d15;

    border-radius: 40% 40% 50% 50%;

    }

    .ears.left .inner {

    margin: 15px 0 0 5px;

    }

    .ears.right .inner {

    margin: 15px 0 0 10px;

    }

    .face {

    width: 200px;

    height: 240px;

    margin: 0 auto;

    background-color: #edc27d;

    border-radius: 150px 150px 200px 200px;

    position: relative;

    z-index: -1;

    }

    .face .eyes {

    width: 30px;

    height: 60px;

    background-color: #222;

    border-radius: 70%;

    position: absolute;

    }

    .face .eyes.left {

    left: 45px;

    top: 80px;

    }

    .face .eyes.right {

    right: 45px;

    top: 80px;

    }

    .face .eyes .pupil {

    width: 5px;

    height: 25px;

    border-radius: 100%;

    background-color: #fff;

    margin: 10px 7px 0 0;

    float: right;

    position: relative;

    transform: rotate(-7deg);

    }

    .face .eyes .pupil:after {

    content: ' ';

    position: absolute;

    bottom: -7px;

    width: 4px;

    height: 4px;

    background-color: #fff;

    border-radius: 100%;

    }

    .chin {

    width: 250px;

    height: 150px;

    margin: -90px auto 0;

    background-color: #fbf9ec;

    border-radius: 48%;

    }

    .chin .nose {

    width: 75px;

    height: 75px;

    background-color: #fd040a;

    top: -15px;

    border-radius: 100%;

    border: 5px solid #aa1c1f;

    margin: 0 auto;

    position: relative;

    animation: nose 1s infinite alternate;

    }

    .chin .nose .inner {

    width: 45px;

    height: 25px;

    background-color: #ffa19a;

    border-radius: 100%;

    position: absolute;

    right: 10px;

    top: 5px;

    transform: rotate(20deg);

    animation: nose-light 1s infinite alternate;

    }

브라우저 호환성 확인 가능한 사이트 - https://caniuse.com