css特效之openbox 

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

 

代码如下：
<!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高版本

　　

 

posted @ 2016-08-18 09:57  sw缪斯  阅读(286)  评论(0)  编辑  收藏  举报