css特效之openbox

最新推荐文章于 2022-02-18 22:04:27 发布

a631924841

最新推荐文章于 2022-02-18 22:04:27 发布

阅读量77

点赞数

原文链接：http://www.cnblogs.com/swmiusi/p/5782900.html

版权

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

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

转载于:https://www.cnblogs.com/swmiusi/p/5782900.html

a631924841

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css特效之openbox

话不多说，先上效果截图，当吧鼠标移动上去就会产生打开盒子的动画代码如下：<!DOCTYPE html><html><head><title>open_box</title><style> #zong{ margin:100px auto; width:300px;...
复制链接

扫一扫