-
(69)CSS_transition1HTML, CSS 2023. 4. 4. 15:40728x90
- transition 1번째 예제
- 아래 링크를 통해 각 태그의 설명을 볼 수 있다.
- https://jm-rograming.tistory.com/105
(66)CSS_기본문법
trangsfrom 2차원 좌표에서 요소를 변형시키는 속성 tramslate : 이동 rotate : 회원 scale : 확대, 축소 skew : 경사, 비틀기 ✔ 벤터 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을
jm-rograming.tistory.com
<!DOCTYPE html><html lang="en"><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>transition</title><style>div{width: 100px;height: 100px;float: left;margin: 30px;}#bg-tr{background-color: gold;transition: background-color ease 2s;}#bg-tr:hover{background-color: red;}#border-tr{background-color: deeppink;border: 3px dotted black;transition: all linear 2s;}#border-tr:hover{background-color: pink;border: 3px dotted gray;border-radius: 50%;}</style></head><body><h2>transition</h2><div id="bg-tr"></div><div id="border-tr"></div></body></html>
- 왼쪽이 마우스 커서를 올려놨을때의 경우로 설정한 값으로 변하는 것을 볼 수 있다.
'HTML, CSS' 카테고리의 다른 글
(71)CSS_animation1 (0) 2023.04.05 (70)CSS_transition2 (2) 2023.04.04 (68)CSS_transfrom (0) 2023.04.04 (67)CSS_동적인 카페 소개 페이지 만들기 (0) 2023.04.04 (66)CSS_기본문법 (0) 2023.04.04