반응형
1. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>이미지 슬라이드 액자형태</title>
<link href="css/ex05.css" rel="stylesheet">
</head>
<body>
<h1>이미지슬라이드 시작</h1>
<div class="canvas">
<div class="panel">
<img src="img/img1.png">
<img src="img/img2.png">
<img src="img/img3.png">
<img src="img/img4.png">
<img src="img/img5.png">
</div>
</div>
<h1>이미지슬라이드 끝</h1>
</body>
</html>
2. CSS Code
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
.box{
width:100px;
height:100px;
background:red;
}
div.canvas{
width:500px;
height:500px;
position:relative;
border:3px solid blue;
overflow:hidden;
}
div.panel{
width:3000px;
position:absolute;
left:0;
top:0;
height:500px;
}
div.panel img{
width:500px;
height:500px;
float:left;
}
@keyframes slide{
from{
left:0;
}
10%{
left:0;
}
20%{
left:-500px;
}
30%{
left:-500px;
}
40%{
left:-1000px;
}
50%{
left:-1000px;
}
60%{
left:-1500px;
}
70%{
left:-1500px;
}
80%{
left:-2000px;
}
100%{
left:-2000px;
}
}
div.panel{
animation-name:slide;
animation-duration:10s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-timing-function:ease-out;
}
div.panel:hover{
animation-play-state:paused;
}
3. HTML / CSS 파일
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190622 Basic Study 51(고정형 레이아웃 구조) (0) | 2019.06.22 |
|---|---|
| HTML5 - 190622 Basic Study 50(이미지 슬라이드 - 상하좌우) (0) | 2019.06.22 |
| HTML5 - 190622 Basic Study 48(Animation Box - 연습문제) (0) | 2019.06.22 |
| HTML5 - 190622 Basic Study 47(Animation 효과) (0) | 2019.06.22 |
| HTML5 - 190622 Basic Study 46(Transition Graph) (0) | 2019.06.22 |
