애니메이션 효과

유요한·2022년 11월 22일
0

프론트(HTML & CSS & JS)

목록 보기
17/40

박스안에 이미지가 계속 지나가는 효과

	<!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>슬라이드 효과</title>
    <style>
        .moving {
            width: 100%;
            height: 500px;
            /*  /뒤에 770px은 이미지의 크기다 */
            background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHI88tH4dhwobftkxshHHVGiWv_C7dyiFGWg&usqp=CAU") 0 center / 770px;
            /*  movebg : 애니메이션을 작동하는데
                2s : 0~100%까지 2초
                linear : 전환 효과는 일정하게 
                infinite : 무한 반복하는 */
            animation: movebg 2s linear infinite;
        }
        /* 작동할 keyframes*/
        @keyframes movebg {
            /* 0%에는 0의 기본위치에서 시작 */
            0% {background-position: 0 center;}
            /* -770px은 좌표변경 값이다. */
            100% {background-position: -770px center;}
        }
    </style>
</head>
<body>
    <div class="moving">
    </div>
</body>
</html>

profile
발전하기 위한 공부

0개의 댓글