其实主要是CSS3旋转的效果
上下DIV分离的效果只要用CSS3动画
这种交互响应可以用在很多图片按钮上
code
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>CSS3旋转效果</title> <style> * { margin: 0; padding: 0; list-style: none; } body { background: #1F1F1F; } .zzsc { position: absolute; z-index: 2000; top: 220px; left: 110px; width: 220px; height: 220px; background: no-repeat url("http://images.cnblogs.com/cnblogs_com/goodbeypeterpan/605441/o_yuan.png") left top; -webkit-background-size: 220px 220px; -moz-background-size: 220px 220px; background-size: 220px 220px; -webkit-border-radius: 110px; border-radius: 110px; -webkit-transition: -webkit-transform 1s ease-out; -moz-transition: -moz-transform 1s ease-out; -o-transition: -o-transform 1s ease-out; -ms-transition: -ms-transform 1s ease-out; } .zzsc:hover { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); transform: rotateZ(360deg); } #top { position: absolute; z-index: 1000; top: 110px; height: 220px; width: 440px; background-color: #ff5200; transition: all 1s ease-out; -webkit-transition: all 1s ease-out; } #foot { position: absolute; z-index: 3000; top: 330px; margin: 0 auto; height: 220px; width: 440px; background-color: #66CC00; transition: all 1s ease-out; -webkit-transition: all 1s ease-out; } </style> </head> <body> <div id="top"></div> <div class="zzsc" id="mid"></div> <div style="text-align:center;clear:both;"> </div> <div id="foot"></div> </body> <script> document.getElementById('mid').addEventListener("mouseover", function() { document.getElementById('top').style.top = '0px'; document.getElementById('foot').style.top = '440px'; }); document.getElementById('mid').addEventListener("mouseout", function() { document.getElementById('top').style.top = '110px'; document.getElementById('foot').style.top = '330px'; }); </script> </html>