07_transition.html 07_transition.css @CHARSET "UTF-8"; #ex div{ width: 100px; height: 100px; border-radius: 0px; border: 2px solid black; background: url(../img/f1.png) no-repeat center center padding-box;/*x축 중간(left), y축 중간(right)*/ transition: all 1s ease-in 0.3s; } #ex:hover div{ border-radius: 50px; border: 2px solid blue; background: url(../img/f2.png) no-repeat center center padding-box; }

06_transition.html 06_transition.css @CHARSET "UTF-8"; /*객체모양 변경*/ #ex div{ width: 100px; height: 100px; background-color: red; border-radius: 0px; transition-property: background-color, border-radius;/*해당하는 2가지 속성에 변형을 준다.*/ transition-duration: 1s; } #ex:hover div{ background-color: blue; border-radius: 50px; }