你的位置:首页 > 网页设计

[网页设计]js特效之open_box


话不多说,先上效果截图,当吧鼠标移动上去就会产生打开盒子的动画

 

代码如下:
<!DOCTYPE html><html><head><title>open_box</title><style> #zong{ margin:100px auto; width:300px; height:300px; position:relative; } #face1,#face2{ width:300px; height:300px; background:url(face1.png) no-repeat; position:absolute; top:0px; left:0px; border:1px solid gray; border-radius:50%; } #face2{ background:url(face2.png) no-repeat; transform-origin:bottom; transition:all 2s; } #zong:hover #face2{ transform:rotatex(180deg); }</style></head><body> <div id="zong"> <div id="face1"> </div> <div id="face2"> </div> </div></body></html>

效果如下,如果看不到可以用ie打开http://123.207.136.94/openbox.html查看,记得用ie高版本