CSS3实现动态打开大门效果（代码实例）

程序员文章站 2022-04-12 16:21:29

...

本章给大家介绍CSS3实现动态打开大门效果（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助

先看看效果图：

动态打开大门效果主要运用到了3D旋转和定位技术。具体步骤如下：

1、首先在页面主体加三个很简单的div标签：

<div class="door">
     <div class="door-l"></div>
     <div class="door-r"></div>
</div>

2、给外层盒子（.door）加上基本的属性、背景、视距以及相对定位（子盒子要用到绝对定位，所以父盒子最好加上相对定位）。

.door {
            width: 450px;
            height: 450px;
            border: 1px solid #000000;
            margin: 100px auto;
            background: url(Images/men.png) no-repeat;
            background-size: 100% 100%;
            position: relative;
            perspective: 1000px;
        }

3、给左右的门设置相关属性，这里给出左盒子的相关属性。右盒子只需将定位改为右边距离为0，以及将旋转轴改为右侧即可。

.door-l {
            width: 50%;
            height: 100%;
            background-color: brown;
            position: absolute;
            top: 0;
            transition: all 0.5s;
            left: 0;
            border-right: 1px solid #000000;
            transform-origin: left;
        }

4、添加门上的小圆环，在这里是使用伪类 before 进行添加的。

　　（1）、设置大小与边框

　　（2）、设置border-radius 为50% 让其变成圆形。

　　（3）、设置定位垂直居中并靠里面有一定距离。

.door-l::before {
            content: "";
            border: 1px solid #000000;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 50%;
            border-radius: 50%;
            transform: translateY(-50%);
            right: 5px;
        }

5、最后设置旋转度数，我这里是设置了120度（注意度数的正负代表旋转方向）

.door:hover .door-l {
            transform: rotateY(-120deg);
        }

下面给出完整代码，给大家参考一下。

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title>动态打开大门</title>
	<style>
	.door {
            width: 450px;
            height: 450px;
            border: 1px solid #000000;
            margin: 100px auto;
            background: url(Images/men.png) no-repeat;
            background-size: 100% 100%;
            position: relative;
            perspective: 1000px;
        }
        .door-l,.door-r {
            width: 50%;
            height: 100%;
            background-color: brown;
            position: absolute;
            top: 0;
            transition: all 0.5s;
        }
        .door-l {
            left: 0;
            border-right: 1px solid #000000;
            transform-origin: left;
        } 
        .door-r {
            right: 0;
            border-left: 1px solid #000000;
            transform-origin: right;
        }
        .door-l::before, .door-r::before {
            content: "";
            border: 1px solid #000000;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 50%;
            border-radius: 50%;
            transform: translateY(-50%);
        }
        
        .door-l::before {
            right: 5px;
        } 
        .door-r::before {
            left: 5px;
        }
        .door:hover .door-l {
            transform: rotateY(-120deg);
        }
        .door:hover .door-r {
            transform: rotateY(120deg);
        }
		</style>
	</head>
	<body>
		<div class="door">
			<div class="door-l"></div>
			<div class="door-r"></div>
		</div>
	</body>
</html>

上面给出的效果图是静态的，大家可以自己编译上述代码，看看效果。希望对你们有所帮助

以上就是CSS3实现动态打开大门效果（代码实例）的详细内容，更多请关注其它相关文章！

CSS3实现动态打开大门效果（代码实例）

利用CSS3实现文字折纸效果实例代码

利用CSS3实现文字折纸效果实例代码

基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码

vue+ElementUI实现订单页动态添加产品数据效果实例代码

基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码

css3 实现滚动条美化效果的实例代码

分享一个CSS3实现自定义Checkbox效果实例代码

vue+ElementUI实现订单页动态添加产品数据效果实例代码

CSS3实现的字符串逐字高亮效果代码实例_html/css_WEB-ITnose

CSS3实现的鼠标悬浮开门关门效果代码实例_html/css_WEB-ITnose