-
(70)CSS_transition2HTML, CSS 2023. 4. 4. 15:45728x90
- transition 2번째 예제
- 아래 링크를 통해 각 태그의 설명을 볼 수 있다.
- 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>transition2</title><style>h2{text-align: center;}#ex{position: relative;width: 800px;height: 400px;margin: 0 auto;border: 5px solid #000;padding: 30px;}p{text-align: center;padding-top: 50px;font-weight: bold;}.bax{font-size: 20px;position: relative;width: 140px;height: 140px;margin-bottom: 50px;background-color: gold;}#no-delay{padding: 20px;text-align: center;width: 100px;height: 100px;background-color: gold;transition: all ease 2s;margin-right: 500px;margin-bottom: 20px;}#ex:hover > .bax{transform: rotate(720deg);margin-left: 650px;
}#no-delay{transition-duration: 3s;}#delay{transition-delay: 1s;transition-duration: 2s;}</style></head><body><h2>transition2</h2><div id="ex"><div id="no-delay" class="bax"><p>╰(*°▽°*)╯</p></div><div id="delay" class="bax"><p>༼ つ ◕_◕ ༽つ</p></div></div></body></html>- 마우스를 올려두면 오른쪽으로 돌면서 움직이는 것을 확인할 수 있다.
'HTML, CSS' 카테고리의 다른 글
(72)CSS_animation 2 (0) 2023.04.05 (71)CSS_animation1 (0) 2023.04.05 (69)CSS_transition1 (0) 2023.04.04 (68)CSS_transfrom (0) 2023.04.04 (67)CSS_동적인 카페 소개 페이지 만들기 (0) 2023.04.04