반응형
- code -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slide</title>
<style>
*{
padding:0;
font-family: 'Arial';
color: #fff;
font-weight: bold;
font-size: 3rem;
text-align: center;
}
ul,li{list-style:none;}
.slide{width:500px; overflow:hidden;}
.slide ul{width:calc(100% * 4);display:flex;animation:slide 8s infinite;} /* slide를 8초동안 진행하며 무한반복 함 */
.slide li{width:calc(100% / 4);height:300px;}
.slide li:nth-child(1){background:lightgray;}
.slide li:nth-child(2){background:darkgrey;}
.slide li:nth-child(3){background:grey;}
.slide li:nth-child(4){background:dimgrey;}
@keyframes slide {
0% {margin-left:0;} /* 0 ~ 10 : 정지 */
10% {margin-left:0;} /* 10 ~ 25 : 변이 */
25% {margin-left:-100%;} /* 25 ~ 35 : 정지 */
35% {margin-left:-100%;} /* 35 ~ 50 : 변이 */
50% {margin-left:-200%;}
60% {margin-left:-200%;}
75% {margin-left:-300%;}
85% {margin-left:-300%;}
100% {margin-left:0;}
}
</style>
</head>
<body>
<div class="slide">
<ul>
<li>lightgray</li>
<li>darkgrey</li>
<li>grey</li>
<li>dimgrey</li>
</ul>
</div>
</body>
</html>결과물
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] 테두리 굴곡(border radius) 주기 (0) | 2020.11.30 |
|---|---|
| [HTML & CSS] 네비게이션 바(Navigation Bar) 기본 (0) | 2020.11.28 |
| [HTML & CSS] 슬라이드(slide) 위로 올라가는 방향 (0) | 2020.11.09 |
| [HTML & CSS] 멋진 리스트 스타일(list style ) (0) | 2020.11.03 |
| [HTML & CSS] html표를 CSV파일로 다운로드(DOWNLOAD) (0) | 2020.11.02 |
댓글