首页 > > 网页制作 > css >

css特效之openbox

2018-06-24 00:13:35来源：未知阅读 ()

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

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有