-
(71)CSS_animation1HTML, CSS 2023. 4. 5. 16:09728x90
- animation 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>animation</title><style>.box{margin-top: 100px;margin-left: 100px;padding: 20px;height: 60px;animation-name: moving;animation-duration: 3s;animation-iteration-count: infinite;animation-direction: alternate;}
@keyframes moving{from{width: 200px;background-color: gold;opacity: 0.5;transform:rotate(0reg)}to{width: 400px;background-color: greenyellow;opacity: 1;transform: rotate(360deg);}}</style></head><body><h2>animation1</h2><div class="box"><h3>CSS3 Animation</h3></div></body></html>
'HTML, CSS' 카테고리의 다른 글
(73)CSS_css우선순위 (0) 2023.04.05 (72)CSS_animation 2 (0) 2023.04.05 (70)CSS_transition2 (2) 2023.04.04 (69)CSS_transition1 (0) 2023.04.04 (68)CSS_transfrom (0) 2023.04.04