모바일 화면 볼 수 있는 사이트
http://troy.labs.daum.net/
애니메이션
· transition : width 5s;
- 5초동안 width 바뀜
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: yellow; transition: width 4s, height 4s, color 4s; transition-delay:1s; } div:hover{ width:200px; height: 200px; color: red; text-align: center; } img{ width:200px; height: 150px; opacity: 0.1; /* transition: opacity 1s; */ transition-property: opacity; transition-duration: 2s; transition: width 4s, height 4s; } img:hover{ opacity: 1; width: 300px; height: 300px; } </style> </head> <body> <img src="image/bbb.jpg"><br> <div>transition예제</div> </body> </html> |
'SK고용디딤돌' 카테고리의 다른 글
| 직무교육 7일차(JavaScript) (0) | 2017.07.18 |
|---|---|
| 직무교육 6일차(JavaScript) (0) | 2017.07.17 |
| 직무교육 4일차(CSS) (0) | 2017.07.13 |
| 직무교육 3일차(CSS) (0) | 2017.07.12 |
| 직무교육 2일차(HTML) (1) | 2017.07.11 |