<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS 연습</title> <script> one=document.getElementById("one"); </script> <style> #one{ background-color: #bb8000; width:500px; height:100px; padding: 10px 10px 10px 10px; margin-top: 10px; margin-left: 10px; } #two{background-color: #bb2288; width:500px; height:100px; padding: 10px 10px 10px 10px; margin-top: 10px; margin-left: 10px; background-image: url( "이미지 1URI를 ~~~") ; -webkit-transition:all 0.9s ; /* 복구하는데 0.8초 */ } #two:hover { width:800px; height:200px; background-color:orange ; background-image:url( "이미지2 URI를 ~~~"); /* webkit 속성은 구글 크롬에서만 됩니다 */ -webkit-transition:all 0.9s ; /* 0.9초동안 변화 */ -webkit-transition-delay: 1s ; /* 1초 후 시작 */ } </style> </head> <body> <div id="one"> 내가 만든 공간 division 1</div> <div id="two"> 내가 만든 공간 division 2 </div> </body> </html> </html>
'CSS' 카테고리의 다른 글
| CSS3 border (0) | 2012.06.14 |
|---|---|
| 위치 (0) | 2012.06.14 |
| 동영상 화면 (0) | 2012.06.14 |
| CSS 연습 (0) | 2012.05.29 |