[Html + CSS] 배경 움직이기

jaypyon·2021년 10월 31일
0

배경 반복 적용

background-repeat

  • repeat-x
  • repeat-y
  • round

배경 움직이기 원리

  • @keyframes와 animation을 이용한 background-position의 값 변경

예제코드

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
</head>

<body>
    <div class="myBack"></div>
</body>

</html>

<style>
    .myBack {
        width: 100%;
        height: 1000px;
        animation: movebg 35s cubic-bezier(0.57, 0.32, 0.43, 0.7) infinite;
        background: url(./starry.jpg) center 0 / 1000px round;
    }

    @keyframes movebg {
        0% {
            background-position: 0 0;
        }
        50%{
            background-position: 0px 500px;
        }
        100% {
            background-position: 0px 1000px;
        }
    }

</style>
profile
DGU CSE

0개의 댓글