【CSS】"开门大吉"动画实现

最新推荐文章于 2022-05-11 22:07:48 发布

ljs_coding

最新推荐文章于 2022-05-11 22:07:48 发布

阅读量886

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/ChristineAS/article/details/87876938

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

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

效果图：

完整源代码

<!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>

ljs_coding

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【CSS】"开门大吉"动画实现

顾名思义，“开门大吉”指的是鼠标悬浮在块内的时候出现开门效果，显示出底部的图片。知识点：3d变形、透视、translate移动效果图：完整源代码<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ ...
复制链接

扫一扫