이번 시간은 주사위 이미지에 마우스를 갖다 놓으면 주사위가 3초간 세배 확대되는 CSS3를 넣어보도록 하겠습니다.
여기서 아시겠지만 이미지 파일이 필요합니다.
[결과 화면]
이미지에 마우스를 올리면 이미지가 100px, 100px 크기엣 300px, 300px로 확대됩니다.
|
|
<!doctype html> <html> <head> <meta charset="UTF-8"> <style> img { width : 100px; height : 100px; transition : width 3s, height 3s; } img:hover { width : 300px; height : 300px; } </style> </head> <body> <img id="dice" src="dice.png"> </body> </html> |
[설명]
(상세 설명)
(가) 이미지 요소에 넓이와 높이 설정, 전환 효과 설정
|
|
img { width : 100px; // 넓이 100px 설정 height : 100px; // 높이 100px 설정 transition : width 3s, height 3s; // 전환 효과 3초간 변경 } |
(나) 이미지 요소에 넓이와 높이 설정, 전환 효과 설정
|
|
img:hover { // 마우스를 이미지 위에 올리면 width : 300px; // 넓이를 300px로 전환 height : 300px; // 높이를 300px로 전환 } |
(다) 이미지 삽입
|
|
<img id="dice" src="dice.png"> |
src부분에는 해당하는 이미지 파일이나 이미지가 있는 위치를 넣어주면 된다.
하나님이 세상을 이처럼 사랑하사 독생자를 주셨으니 이는 그를 믿는 자마다 멸망하지 않고 영생을 얻게 하려 하심이라(요3:16)
'프로그래밍 > 신나는 웹프로그래밍' 카테고리의 다른 글
| [CSS3] transform:rotate를 이용한 이미지 회전 (0) | 2016.01.19 |
|---|