반응형
a{
color:white;
background-color: tomato;
text-decoration: none;
padding:3px 5px;
border-radius:5px;
font-size:55px;
/* transition:background-color 2s ease-in-out, color 2s ease-in-out; */
transition:all 2s ease-in-out;
}
a:hover{
border-radius:25px;
color:tomato;
background-color: wheat;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>about me</title>
<style>
a{
color:white;
background-color:tomato;
text-decoration:none;
padding:30px 50px;
border-radius:5px;
font-size:10rem;
transition:color 2s cubic-bezier(0.785, 0.135, 0.150, 0.860),
border-radius 5s ease-in-out,
background-color 10 ease-in-out;
}
a:hover{
color:tomato;
background-color:wheat;
border-radius:50px;
}
</style>
</head>
<body>
<div>
<a href="">website</a>
</div>
</body>
</html>트랜지션 규칙
1. 복수 처리는 , 를 사용 ex) transition:background-color 2s ease-in-out, color 2s ease-in-out;
2.모든 이벤트는 all 을 추가 한다. ex) transition:all 2s ease-in-out
3. 트랜지션은 원래 엘리먼트에 넣어야한다. state에 넣는 것이 아니다
참고 사이트
반응형
'Frontend > HTML, CSS, DOM, jQuery' 카테고리의 다른 글
| CSS) Transform (0) | 2021.12.11 |
|---|---|
| grid item 움직이기 (0) | 2021.12.07 |
| CSS) style에 변수처리 (0) | 2021.11.30 |
| State ( hover, focus, visited, active) (0) | 2021.11.29 |
| Pseudo Selector(수도 셀렉터) 모든 것 (0) | 2021.11.21 |