CSS实现"开门大吉"

顾名思义,“开门大吉”指的是鼠标悬浮在块内的时候出现开门效果,显示出底部的图片。

知识点:3d变形、透视、translate移动

效果图:

CSS实现"开门大吉"CSS实现"开门大吉"

完整源代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	   *{
	   	margin: 0;
	   	padding: 0;
	   }
		.bg{
			width: 300px;
			height: 200px;
			margin:100px auto;
			position: relative;
			transition: all 0.6s;
			perspective: 500px;
			border:1px solid black;
			background-image: url(images/bg.jpg);
			-webkit-background-size: cover;
			background-size: cover;
			
 		}
 		.left,
 		.right{
 			width:50%;
 			height:100%;
 			background-color: red;
 			position: absolute;
 			top:0;
 			transition: 1s;
 		}
 		.left{
 			left:0;
            transform-origin: left center;
            border-right:1px solid black;
 		}
 		.right{
 			right:0;
 			transform-origin: right center;
 			border-left:1px solid black;
 		}
 		.left:before,.right:before{
 			content: "";
 			width:20px;
 			height: 20px;
 			border:1px solid black;
 			border-radius: 10px;
 			position: absolute;
 			left:0;
 		}
 		.left:before{
 			transform: translate(127px,80px);
 		}
 		.right:before{
 			transform: translate(0px,80px);
 		}
 		.bg:hover .left{
 			transform: rotateY(-120deg);
 		}
 		.bg:hover .right{
 			transform: rotateY(120deg);
 		}
	</style>
</head>
<body>

<div class="bg">
	<div class="left"></div>
	<div class="right"></div>
</div>
</body>
</html>

 

上一篇:Python小项目之五子棋


下一篇:CF704C.Black Widow