성 시 속 대
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*초기화*/
*{margin:0; padding:0;}
ul li,ol li{list-style:none;}
/**/
html,body{
width: 100%; height: 100%;
}
#wrapper{
}
.rec{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
transition-property:all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 1s;
}
.rec:hover{
background: blue;
width: 200px;
height: 200px;
}
.rec:active{
background: orange;
border-radius: 50%;
transition:background-color 2s linear 2s;
}
h1{
position: absolute;
top: 100px;
}
</style>
</head>
<body>
<div class="rec"></div>
<h1>transition을 줄때 사용 가능한 속성명 : 성 시 속 대 (속성,시간,속도,대기시간)</h1>
</body>
</html>02_속도그래프
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_속도 그래프</title>
<style type="text/css">
.bo{
border:1px solid red;
}
.wrap{
width: 100%;
height: 900px;
}
.wrap ul{
width: 95%;
height: 40%;
}
.wrap ul li{
width: 15%;
height: 50px;
background-color: #0BD5B2;
margin:2px;
float: left;
list-style: none;
text-align: center;
}
.wrap ul:nth-of-type(2) li{
/*animation-name: long;
animation-duration: 2s;*/
/*애니메이션을 줄 때 꼭 필요한 속성: 이름 시간;*/
/*animation-iteration-count: 3;
animation-delay: 1s;
animation-timing-function: linear;
animation-direction: alternate;
animation-fill-mode: forwards;*/
animation:long 2s linear 0.5s 3 reverse forwards;
}
@keyframes long{
0%{height:50px; background-color: pink}
30%{height:70px; background-color: orange}
70%{height:0px; background-color: purple}
100%{height:300px; background-color: skyblue}
}
.wrap ul:nth-of-type(2) li:hover{
animation-play-state: paused;
}
/*첫번째 그래프에 transition속도를 다양하게 구성*/
.wrap ul:nth-of-type(1) li{
transition:2s;
}
.wrap ul:nth-of-type(1):hover li{
height: 300px;
}
.wrap ul:nth-of-type(1) li:nth-child(1){
transition-timing-function: linear;
}
.wrap ul:nth-of-type(1) li:nth-child(2){
transition-timing-function: ease-in;
}
.wrap ul:nth-of-type(1) li:nth-child(3){
transition-timing-function: ease-out;
}
.wrap ul:nth-of-type(1) li:nth-child(4){
transition-timing-function: ease-in-out;
}
.wrap ul:nth-of-type(1) li:nth-child(5){
transition-timing-function: ease;
}
.wrap ul:nth-of-type(1) li:nth-child(6){
transition-timing-function: cubic-bezier(1,0,.03,1);
}
</style>
</head>
<body>
<!-- div.wrap.bo>ul.bo>li*6^ul.bo>li*6>{graph$} -->
<div class="wrap bo">
<h1>transition</h1>
<ul class="bo">
<li>linear</li>
<li>ease-in</li>
<li>ease-out</li>
<li>ease-in-out</li>
<li>ease(default)</li>
<li>cubic-bezier</li>
</ul>
<h1>animation</h1>
<ul class="bo">
<li>graph1</li>
<li>graph2</li>
<li>graph3</li>
<li>graph4</li>
<li>graph5</li>
<li>graph6</li>
</ul>
</div>
</body>
</html>01_ 애니메이션의 활용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*초기화*/
*{margin:0; padding:0;}
ul li,ol li{list-style:none;}
/**/
html,body{
background: skyblue;
}
#wrapper{
}
/**/
.mountain{
width: 1500px;
height: 721px;
background: url(img/background.png);
position: absolute;
left:50%;
margin-left: -750px;
bottom:-60px;
}
.milk{
width: 195px;
height: 556px;
background: url(img/decrease_milk.png) no-repeat;
position: absolute;
border: 1px solid red;
left: 56%; bottom:80px;
z-index: -1;
/* animation: reduce 2s steps(5) infinite; */
animation: change 2s infinite;
}
/* @keyframes reduce{
form{}
to{ background-position: -980px; }
} */
@keyframes change{
0%{background-image:url(img/milk_01.png);}
20%{background-image:url(img/milk_02.png);}
40%{background-image:url(img/milk_03.png);}
70%{background-image:url(img/milk_04.png);}
100%{background-image:url(img/milk_05.png);}
}
</style>
</head>
<body>
<section>
<div class="mountain"></div>
<div class="milk"></div>
</section>
</body>
</html>02_animation-fill-mode의 활용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*초기화*/
*{margin:0; padding:0;}
ul li,ol li{list-style:none;}
/**/
html,body{
background: skyblue;
}
#wrapper{
}
/**/
.mountain{
width: 1500px;
height: 721px;
background: url(img/background.png);
position: absolute;
left:50%;
margin-left: -750px;
bottom:-60px;
}
.milk{
width: 195px;
height: 556px;
background: url(img/decrease_milk.png) no-repeat;
position: absolute;
border: 1px solid red;
left: 56%; bottom:80px;
z-index: -1;
/* animation: reduce 2s steps(5) infinite; */
animation: change 2s infinite;
}
/* @keyframes reduce{
form{}
to{ background-position: -980px; }
} */
@keyframes change{
0%{background-image:url(img/milk_01.png);}
20%{background-image:url(img/milk_02.png);}
40%{background-image:url(img/milk_03.png);}
70%{background-image:url(img/milk_04.png);}
100%{background-image:url(img/milk_05.png);}
}
</style>
</head>
<body>
<section>
<div class="mountain"></div>
<div class="milk"></div>
</section>
</body>
</html>파비콘과 다양한 커서
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_파비콘과 다양한 커서</title>
<link rel="icon" href="favicon/favicon.ico">
<style type="text/css">
/*초기화*/
*{margin:0; padding:0;}
ul li,ol li{list-style:none;}
/**/
.batman{
width: 300px;
height: 300px;
background-color: antiquewhite;
cursor: url(img/bat18.png), auto;
}
.pet{
width: 300px;
height: 300px;
background-color:cornflowerblue;
cursor: url(img/cursor.cur), auto;
}
/**/
</style>
</head>
<body>
<div class="batman"></div>
<div class="pet"></div>
</body>
</html>기울어진 네비
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_기울어진 네비</title>
<style type="text/css">
/*초기화*/
ul li{
list-style: none;
}
section{
background-color: azure;
/* width: 100%;height: 100%; */
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
}
nav{
width: 110%;
height: 70px;
background-color: aquamarine;
position: absolute;
left: -10%;
}
nav ul{
transform: skewX(-40deg);
overflow: hidden;
width: 100%;
height: 70px;
transform: skewX(-45deg);
}
nav li{
width: 20%;
height: 70px;
float: left;
background-color: chartreuse;
}
nav li:hover{
background-color: crimson;
}
nav li a{
display: block;
text-align: center;
line-height: 70px;
text-decoration: none;
width: 100%;
height: 100%;
color: white;
font-weight: bold;
transform: skewX(45deg);
transition:all 1s;
}
nav li:hover a {
transform: skewX(45deg) scale(1.5);
}
</style>
</head>
<body>
<section>
<nav>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
</ul>
</nav>
</section>
</body>
</html>animation 의 활용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_animation의 활용</title>
<style>
*{margin: 0;
padding: 0;}
.bo{
border:1px solid purple;
}
#wrapper{
width: 200%;
height: 950px;
border:1px solid red;
}
#wrapper>section{
width: 50%;
height:100%;
border:1px solid blue;
float: left;
box-sizing: border-box;
}
/*board판*/
#wrapper>section:nth-child(1) .board{
width: 717px;
height: 419px;
background: url(img/home/board.png);
position: absolute;
bottom:0;
left:50%;
margin-left: -358.5px;
}
#wrapper>section:nth-child(1) .plane{
width: 664px;
height: 228px;
background: url(img/index_air.png);
position: absolute;
top:0;
left:50%;
animation: fly 5s infinite;
}
@keyframes fly{
0%{left:100%; transform: rotateY(0);}
49.999%{left:-50%; transform: rotateY(0)}
50%{left: -50%; transform: rotateY(180deg);}
99.999%{left: 100%; transform: rotateY(180deg);}
100%{left:100%;}
}
/*새 스타일*/
.bird{
width: 171px;
height: 169px;
background: url(img/home/bird_change.png);
position: absolute; right: 10%; bottom:1300px;
animation: bird 5s steps(12) 1 forwards;
}
@keyframes bird{
20%{right: 0%; bottom:1300px;}
40%{right:10%; bottom:1000px;}
60%{right:20%; bottom:800px;}
80%{background-position: -2052px; right:50%; bottom:400px;}
100%{background-position: -2052px; right:50%; bottom:400px;}
}
.bird:hover{
animation: birdhover 2s steps(12) 1 forwards;
}
@keyframes birdhover{
0%{background-position: -2052px; right:50%; bottom:400px; transform:rotateY(180deg)}
40%{right:20%; bottom:800px; transform:rotateY(180deg)}
80%{right:10%; bottom:1000px; transform:rotateY(180deg)}
100%{right: 0%; bottom:1300px; transform:rotateY(180deg)}
}
</style>
</head>
<body>
<div id="wrapper">
<section>
<div class="board bo"></div>
<div class="plane bo"></div>
<div class="bird bo"></div>
</section>
<section></section>
</div>
</body>
</html>section{
background-color: azure;
/*width: 100%;height: 100%;*/
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
}
풀스택 국비수강중