반응형
- code -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slide</title>
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
.slide{height:300px;overflow:hidden;}
.slide ul{height:calc(100% * 4);animation:slide 8s infinite;}
.slide li{height:calc(100% / 4);}
.slide li:nth-child(1)
.slide li:nth-child(2)
.slide li:nth-child(3)
.slide li:nth-child(4){background:none;}
@keyframes slide {
0% {margin-top:0;}
10% {margin-top:0;}
25% {margin-top:-300px;}
35% {margin-top:-300px;}
50% {margin-top:-600px;}
60% {margin-top:-600px;}
75% {margin-top:-900px;}
85% {margin-top:-900px;}
100% {margin-top:0;}
}
</style>
</head>
<body>
<div class="slide">
<ul>
<li><a href="#"><img src="https://img1.daumcdn.net/thumb/R720x0.q80/?scode=mtistory2&fname=http%3A%2F%2Fcfile24.uf.tistory.com%2Fimage%2F14177447505423BD353D6F" alt=""></a></li>
<li><a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTBzdDK_GhLhi3W-lu7Yii9-5qtDyORM3asiw&usqp=CAU" alt=""></a></li>
<li><a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT4x_2tbNBNyAdmZ8sUTGTnmdvkGhc2QA_LtA&usqp=CAU" alt=""></a></li>
<li><a href="#"><img src="https://img1.daumcdn.net/thumb/R720x0.q80/?scode=mtistory2&fname=http%3A%2F%2Fcfile3.uf.tistory.com%2Fimage%2F1643FE47505423BD092340" alt=""></a></li>
</ul>
</div>
</body>
</html>결과물
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] 네비게이션 바(Navigation Bar) 기본 (0) | 2020.11.28 |
|---|---|
| [HTML & CSS] 슬라이드(slide) 옆으로 움직이는 방향 (0) | 2020.11.13 |
| [HTML & CSS] 멋진 리스트 스타일(list style ) (0) | 2020.11.03 |
| [HTML & CSS] html표를 CSV파일로 다운로드(DOWNLOAD) (0) | 2020.11.02 |
| [HTML & CSS] 다양한 모양의 체크박스(checkbox) 만들기 !! (코드&예시 첨부) (0) | 2020.10.27 |
댓글