/*无javascript代码,请查看html与css代码*/
<!-- 容器 --> <div class="container-box radius-box"> <!-- logo --> <img class="logo radius-box" src="http://pic.cnblogs.com/avatar/387969/20141021152547.png" alt="logo图片"/> <!-- logo end --> </div> <!-- 容器 end -->
/************** 圆角边框样式 ******************/ .radius-box { border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; } /************** 容器样式 ******************/ .container-box { width: 100px; height: 100px; border: solid 5px #ccc; } /************** logo样式 ******************/ .logo { width: 100px; height: 100px; border: solid 5px #ffffff; box-sizing: border-box; opacity: 1; transition: opacity 1s ease .1s, width 1s, height 1s,transform 1s; -webkit-transition: opacity 1s ease .1s, width 1s, height 1s,transform 1s; /* Safari 和 Chrome */ -moz-transition: opacity 1s ease .1s, width 1s, height 1s,transform 1s; /* Firefox 4 */ -o-transition: opacity 1s ease .1s, width 1s, height 1s,transform 1s; /* Opera */ } /************** logo:hover状态下将opacity改为0 ******************/ .logo:hover { opacity: 0; width: 0; height: 0; transform: translate(50px,50px); -moz-transform: translate(50px,50px); -webkit-transform: translate(50px,50px); -o-transform: translate(50px,50px); }