Ex 004 | Building

dhforb123·2021년 11월 16일
0

HTML/CSS 예제

목록 보기
4/4

[멋쟁이 사자처럼 프론트엔드 스쿨]에서 배운 내용을 활용한 연습 예제.
- Building
- CSS animation

👨‍💻 Building 👨‍💻

1. Result

학습한 animation 속성을 활용해 건물이 건축되는 것처럼 보여지는 효과를 준 애니메이션이다.

건축되는 과정 각 단계별 사진이 가로로 연속으로 붙어 있는 사진을 준비한 후
steps() 속성 값을 통해 각 단계를 잘라서 보여준다.

2. Code

<!-- This is Building animation -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Building animation</title>
    <style>
        @keyframes move {
            from {
                background-position: 0 0;
            }
            to {
                background-position: -8192px 0;
            }
        }

        .building {
            width: 195px;
            height: 290px;
            background-image: url("./building/frame_paullab.png");
            animation: move 3s steps(42) infinite;
        }
    </style>
</head>
<body>
    <div class="building"></div>
</body>
</html>

3. Review

animation 속성을 통한 정말 짧고 간단한 코드이지만 건물이 건축되는 것 같은 결과물을 가시적으로 볼 수 있어 흥미로운 예제였다.
이러한 예제처럼 html과 css를 어떻게 사용하는 것에 따라 독창적인 결과물을 만들어 낼 수 있다는 것에서 자극을 얻을 수 있었다.

0개의 댓글