CSS3实现动态打开大门效果的方法-创新互联

CSS3实现动态打开大门效果的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

成都创新互联公司专注于清江浦企业网站建设,成都响应式网站建设,商城建设。清江浦网站建设公司,为清江浦等地区提供建站服务。全流程定制开发,专业设计,全程项目跟踪,成都创新互联公司专业和态度为您提供的服务

先看看效果图:

CSS3实现动态打开大门效果的方法

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

1、首先在页面主体加三个很简单的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);
        }

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



    
	
	动态打开大门
	
	
	
		

感谢各位的阅读!看完上述内容,你们对CSS3实现动态打开大门效果的方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联网站制作公司行业资讯频道。


网站标题:CSS3实现动态打开大门效果的方法-创新互联
文章出自:http://scyanting.com/article/dhegjs.html