박스안에 이미지가 계속 지나가는 효과
<!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>
발전하기 위한 공부