728x90
1. state
(1) button:active
=> 버튼을 클릭했을때
(2) button:hover
=> 마우스를 올렸을때
(3) button:focus;
=> active와 비슷하다고
생각할수 있는데
키보드를 눌렀을때
(4) a:visited{
color:tomato;
}
=>링크를 방문하면 색이 tomato
로 바뀐다.
(5) focus-within
=> focused인 자식을 가진 부모 element에
적용된다.
2. transition
어떤 상태에서 다른 상태로
가는 변화 과정을 애니메이션으로
보여주는 것
<style>
a{
color: wheat;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
font-size: 55px;
transition: color 1s cubic-bezier(0.6,0,0.735,0.045),
border-radius 5s ease-in-out, background-color 10s ease-out;
}
a:hover{
color: tomato;
border-radius: 20px;
background-color: wheat;
}
</style>
</head>
<body>
<a href="#">Go home</a>
</body>
a태그에 마우스를 올렸을때의
변화과정을 애니메이션으로 보여주는 코드
color,background-color를 대조시켜서
변화를 선명히 느낄 수 있다.
ease-in-out을 써서 변화과정을
곡선 그래프로 나타낸것
주의할점은
transition은 state에 있으면
안되고 항상 element상태에
있어야 한다
다시말해 root에 있어야한다..!
3. transformation
css로 3d까지 가능하다는것을
보여주는 기능..!
<html>
<head>
<style>
img{
border: 5px solid black;
border-radius: 50%;
transition: transform 5s ease-in-out;
}
img:hover{
transform: rotatey(90deg) scale(0.5);
}
</style>
</head>
<body>
<img src="000701.png"/>
</body>
</html>
마우스를 올렸을때,
transform을
Y축으로 각도를 90 돌린다
크기를 0.5로 만든다.
border의 radius를 50%로
만들면 원이 된다...!
728x90
'Frontend > Css' 카테고리의 다른 글
| (4) - CSS(Pseudo Selector) (0) | 2022.10.24 |
|---|---|
| (3) - CSS(class / layout) (0) | 2022.10.24 |
| (2) - CSS(block / inline ) (0) | 2022.10.22 |
| (1)- CSS(HTML 연결방법 / 작성법 ) (0) | 2022.10.22 |