반응형
1. 상하 HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>이미지 슬라이드(상하좌우)</title>
<link href="css/ex06.css" rel="stylesheet">
</head>
<body>
<a href="#wrap">
<button>회전</button>
<div id="wrap">
<ul>
<li style="top:0"><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
</ul>
</div>
</body>
</html>
2. 좌우 HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>이미지 슬라이드(상하좌우)</title>
<link href="css/ex06.css" rel="stylesheet">
</head>
<body>
<a href="#wrap">
<button>회전</button>
<div id="wrap">
<ul>
<li style="left:0"><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
</ul>
</div>
</body>
</html>
3. 상하 CSS Code
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
div#wrap{
width:300px;
height:400px;
border:2px solid blue;
position:relative;
}
#wrap ul{
list-style:none;
width:300px;
height:400px;
position:relative;
}
#wrap ul li{
list-style:none;
width:100%;
height:100%;
position:absolute;
top:100%;
}
#wrap ul li img{
width:100%;
height:100%;
}
@keyframes img1{
from{
top:0%;
}
50%{
top:-100%;
}
100%{
top:-200%;
}
}
@keyframes img2{
from{
top:100%;
}
50%{
top:0%;
}
100%{
top:-100%;
}
}
@keyframes img3{
from{
top:200%;
}
50%{
top:100%;
}
100%{
top:0%;
}
}
ul li{
animation-duration:3s;
animation-iteration-count:infinite;
animation-direction:alternate;
}
ul li:nth-child(1){
animation-name:img1;
}
ul li:nth-child(2){
animation-name:img2;
}
ul li:nth-child(3){
animation-name:img3;
}
#wrap{
overflow:hidden;
}
#wrap:target{
transform:rotate(360deg);
transition:1s;
}
4. 좌우 CSS Code
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
div#wrap{
width:300px;
height:400px;
border:2px solid blue;
position:relative;
}
#wrap ul{
list-style:none;
width:300px;
height:400px;
position:relative;
}
#wrap ul li{
list-style:none;
width:100%;
height:100%;
position:absolute;
left:100%;
}
#wrap ul li img{
width:100%;
height:100%;
}
@keyframes img1{
from{
left:0%;
}
50%{
left:-100%;
}
100%{
left:-200%;
}
}
@keyframes img2{
from{
left:100%;
}
50%{
left:0%;
}
100%{
left:-100%;
}
}
@keyframes img3{
from{
left:200%;
}
50%{
left:100%;
}
100%{
left:0%;
}
}
ul li{
animation-duration:3s;
animation-iteration-count:infinite;
animation-direction:alternate;
}
ul li:nth-child(1){
animation-name:img1;
}
ul li:nth-child(2){
animation-name:img2;
}
ul li:nth-child(3){
animation-name:img3;
}
#wrap{
overflow:hidden;
}
#wrap:target{
transform:rotate(360deg);
transition:1s;
}
5. HTML / CSS 파일
ex06.html
0.00MB
ex06.css
0.00MB
6. Img 파일
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190622 Basic Study 52(유동형 레이아웃 구조) (0) | 2019.06.22 |
|---|---|
| HTML5 - 190622 Basic Study 51(고정형 레이아웃 구조) (0) | 2019.06.22 |
| HTML5 - 190622 Basic Study 49(이미지 슬라이드 구현 - 액자형) (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 |
