by Jeoney Kim

HTML+CSS 할로윈 호박 만들기
2018년 10월 31일에 업데이트됨

by Jeoney Kim

할로윈 호박 만들기 웹 기술로 움직이는 호박 만들기

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

Happy Halloween

코딩으로 실습해보기

  • HTML

    <div class="lantern">

    <div class="face">

    <div class="eyes"></div>

    <div class="mouth"></div>

    </div>

    </div>

    <h1>happy<span >halloween</span></h1>

  • CSS설명보기

    /* Google Web Font */구글 웹폰트를 이용하면 폰트를 쉽게 변경할 수 있다

    @import url ('https://fonts.googleapis.com/css?family=Bungee');

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

    @keyframes zoom {

    0% {

    transform: scale(1);

    }

    100% {

    transform: scale(0.8);

    }

    }

    @keyframes eyes {

    0% {

    margin-top: 10px;

    }

    100% {

    border-bottom-color: yellow;

    box-shadow: 0 10px 200px orange;

    margin-top: 0;

    }

    }

    @keyframes mouth {

    0% {

    height: 50px;

    }

    100% {

    height: 80px;

    background-color: yellow;

    box-shadow: inset 0 0 40px orangered;

    }

    }

    @keyframes letter {

    0% {

    letter-spacing: 0;

    }

    100% {

    letter-spacing: 10px;

    }

    }

    @keyframes face {

    0% {

    margin: 0 40px;

    }

    100% {

    margin: -20px 40px;

    }

    }

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

    body {

    background-color: #030319;

    }

    .lantern {

    animation: zoom 1s infinite alternate;

    width: 330px;

    height: 280px;

    background-color: orangered;

    margin: 140px auto 30px;

    border-width: 0 30px;

    border-style: solid;

    border-color: #ff6830;

    border-radius: 100px;

    position: relative;

    }

    .lantern:before,

    .lantern:after {

    content: ' ';

    width: 52px;

    position: absolute;

    top: 0;

    bottom: 0;

    left: -100px;

    background-color: #000;

    margin: 20px 0;

    border-radius: 200px 0 0 2000px;

    border-width: 0 0 0 20px;

    border-color: #222;

    border-style: solid;

    }

    .lantern:after {

    left: auto;

    right: -100px;

    transform: rotateY(180deg);

    }

    .face {

    position: absolute;

    border-width: 0 30px 0;

    border-style: solid;

    border-color: #ff6830;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    margin: -10px 40px;

    animation: face 1s infinite alternate;

    background-color: orangered;

    border-radius: 70px;

    }

    .face:before {

    content: ' ';

    width: 30px;

    height: 60px;

    background-color: forestgreen;

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    margin: -70px auto 0;

    border-width: 0 10px 20px 10px;

    border-style: solid;

    border-color: darkgreen darkgreen #0a330a;

    border-radius: 10px;

    }

    .eyes {

    text-align: center;

    word-break: keep-all;

    white-space: nowrap;

    text-indent: -65px;

    animation: eyes 1s infinite alternate;

    }

    .eyes:before,

    .eyes:after {

    content: ' ';

    display: inline-block;

    width: 0px;

    border-radius: 100%;

    height: 0;

    border-width: 60px;

    border-style: solid;

    margin: 20px;

    border-color: transparent transparent #222 transparent;

    animation: eyes 1s infinite alternate;

    }

    .mouth {

    background-color: #222;

    height: 40px;

    border-top: 15px dashed orangered;

    border-bottom: 10px dotted orangered;

    border-radius: 0;

    animation: mouth 1s infinite alternate;

    }

    h1 {

    margin: 0;

    text-align: center;

    color: orangered;

    font-size: 80px;

    font-family: 'Bungee', cursive;

    animation: letter 1s infinite alternate;

    }

    h1 span {

    display: block;

    font-size: 0.7em;

    color: orange;

    text-shadow: 0 5px #964527;

    }

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