반응형
1. Transition
transition
transition-delay
transition-duration
transition-property : 전환효과가 적용될 속성을 지정(기본값 all)
transition-timing-function:
ease
linear
ease-in
ease-out
ease-in-out
2. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 변형과 애니메이션</title>
<link href="css/ex01.css" rel="stylesheet">
</head>
<body>
<h1> transition 효과 주기 </h1>
<div class="box">box</div>
</body>
</html>
3. CSS Code
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
.box{
width:100px;
height:100px;
background:red;
}
/* 글자중앙으로 맞추기 */
.box{
text-align:center;
line-height:100px;
}
/* 마우스 올렸을시 */
.box:hover{
width:150px;
height:150px;
/* 시간설정하기 */
transition-duration:1s;
/* 지연시간설정하기 */
transition-delay:0.5s;
/* 배경색 변경 */
background:orange;
/* 전환효과가 적용될 효과 */
transition-property:background-color;
/* 나한테 자동차가 올때 */
transition-timing-function:ease-in;
/* 나한테 자동차가가 지나갈때 */
/* transition-timing-function:ease-out; */
/* 속성 시간 함수 지연 */
/* transition:background-color 1s ease, width 2s ease-out 1s; */
}
/* position 기준점 생성 */
.box{
/* position:relative; */
position:absolute;
/* left:0; */
/* top:0; */
left:200px;
top:200px;
}
/* 마우스 클릭시 */
.box:active{
/* 현재 위치에서 왼쪽에서 위에서 50픽셀만큼 이동 */
/* position:relative; */
/* left:50px; */
/* top:50px; */
/* transition:0.5s; */
left:calc(200px - 50px);
top:calc(200px - 50px);
}
4. HTML / CSS File
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190622 Basic Study 47(Animation 효과) (0) | 2019.06.22 |
|---|---|
| HTML5 - 190622 Basic Study 46(Transition Graph) (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 |
| HTML5 - 190616 Basic Study 42(박스 가로 방향 배치) (0) | 2019.06.16 |
