css实现一个开门效果

最新推荐文章于 2024-07-17 16:51:52 发布

stpzhf

最新推荐文章于 2024-07-17 16:51:52 发布

阅读量189

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/stpzhf/article/details/133943527

版权

本文介绍了如何使用CSS创建一个开门倾斜效果，通过`.door`、`.left`和`.right`类的组合以及`transform`,`transition`属性，实现了鼠标悬停时左右两侧元素分别旋转130度的动画。

摘要由CSDN通过智能技术生成

最近看到一个大屏效果类似于一个开门倾斜效果所以再网上找到一个开门css 效果准备记录一下废话不多说直接上代码

代码如下（示例）：

<!-- 开门 -->
<div class="door">
    <div class="left"></div>
    <div class="right"></div>
</div>


<style>
	/* 开门 */
	.door{
	    width: 550px;
	    height: 300px;
	    margin: 150px auto;
	    perspective: 1200px;
	    position: relative;
	    border: 1px solid;
	    transition: all 1s;
	}
	
	.left,.right {
	    float: left;
	    width: 50%;
	    height: 100%;
	    background-color: blue;
	    opacity: 0.1;
	    transition: 1s;
	    position: relative;
	}
	.left{
	    /* 旋转中心点变成是左边、上下居中的那个位置 */
	    transform-origin: left center;
	}
	.right{
	    transform-origin: right center;
	}
	.door:hover .left {
	    transform: rotateY(-130deg);
	}
	.door:hover .right {
	    transform: rotateY(130deg);
	}
</style>