반응형
1. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>움직이는 그래프 만들기</title>
<link href="css/ex02.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>움직이는 그래프 만들기</h1>
<!-- div#graph>div.bar{data$}*5 -->
<div id="graph">
<div class="bar">data1</div>
<div class="bar">data2</div>
<div class="bar">data3</div>
<div class="bar">data4</div>
<div class="bar">data5</div>
</div>
</body>
</html>
2. CSS Code
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
#graph{
width:610px;
border:3px solid black;
}
.bar{
width:10px;
height:50px;
background-color:red;
margin:5px;
transition-duration:5s;
}
#graph:hover>div.bar{
width:600px;
transition-timing-function:linear;
background-color:orange;
}
div.bar:nth-child(1){
transition-delay:0s;
background-color:peru;
transition-timing-function:ease-in;
}
div.bar:nth-child(2){
transition-delay:0.5s;
background-color:pink;
transition-timing-function:ease-in-out;
}
div.bar:nth-child(3){
transition-delay:1s;
background-color:gold;
transition-timing-function:ease;
}
div.bar:nth-child(4){
transition-delay:1.5s;
background-color:red;
transition-timing-function:ease-in;
}
div.bar:nth-child(5){
transition-delay:2s;
background-color:gray;
transition-timing-function:ease-out;
}
#graph:hover>div.bar:nth-child(1){
background-color:peru;
}
#graph:hover>div.bar:nth-child(2){
background-color:pink;
}
#graph:hover>div.bar:nth-child(3){
background-color:gold;
}
#graph:hover>div.bar:nth-child(4){
background-color:red;
}
#graph:hover>div.bar:nth-child(5){
background-color:gray;
}
3. HTML / CSS 파일
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| 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 45(transition 효과 주기) (0) | 2019.06.22 |
| HTML5 - 190616 Basic Study 44(WebSite Layout Basic 2) (0) | 2019.06.16 |
| HTML5 - 190616 Basic Study 43(WebSite Layout Basic 1) (0) | 2019.06.16 |
