HTML & CSS 활용 프로젝트_ 고양이 댄스 애니메이션 만들기

 코드 

 

<div class="container">
    <div class="ground"></div>
    <div class="wall"></div>
    <div class="speaker1"></div>
    <div class="speaker2"></div>
    <div class="people"></div>
    <div class="box"></div>
</div>

 

*,*::after,*::after{
    box-sizing: border-box;
}
.container {
    width: 200px;
    height: 150px;
    border: 2px solid #000;
    animation: background 2s linear 0s infinite normal ;
    position: relative;
}
.ground {
    width: 196px;
    height: 45px;
    bottom: 0px;
    position: absolute;
    background: rgba(37, 37, 37, 0.884);
}
.wall {
    width: 190px;
    height: 130px;
    left: 5px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    background-image: url(/images/wall3.png);
}
.box {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-image: url(/images/danceCat2.gif);
}
.speaker1 {
    width: 50px;
    height: 50px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 18%;
    background-image: url(/images/speaker.png);
    animation: speaker 1s step-end 0s infinite normal ;
}
.speaker2 {
    width: 50px;
    height: 50px;
    position: absolute;
    transform: translate(50%,-50%);
    top: 50%;
    right: 18%;
    background-image: url(/images/speaker.png);
    animation: speaker 1s step-end 0.5s infinite normal;
}
.people {
    width: 180px;
    height: 90px;
    background-size: cover;
    position: absolute;
    bottom: 0%;
    left:10px;
    background-image: url(/images/people.png);
}
@keyframes background {
    0%{background-color:rgb(56, 56, 56);}
    25%{background:rgb(0, 105, 65);}
    50%{background-color:rgb(56, 56, 56);}
    75%{background:rgb(43, 0, 92);}
    100%{background-color:rgb(56, 56, 56);}
}
@keyframes speaker {
    50%{
        top: 49%;
        height: 55px;
        width: 55px;
        background-size:cover;
    }
}

 

 결과 

---

 코멘트 

CSS의 animation에 대해서 조금 공부해보고 여러가지 시도를 하다가

고양이 댄스를 만들어봤다!
모든 것들은 직접 도트를 한 땀 한 땀 찍어서 만들었는데

보람도 있고 결과가 귀여워서 좋다!