CSS 实例之打开大门

本个实例主要的效果如下图所示

本案例主要运用到了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 lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</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>

View Code

转载于:https://www.cnblogs.com/Assist/p/9684982.html

CSS 实例之打开大门相关推荐

CSS实例—以一个简单网页为例
CSS实例一.整体布局二.总览三.详述 3.1 header 3.1.1 title 内容:gsonya-CSS 3.1.2 search (1)input type:search: 动画效果: ...
转：ORA-01126: 数据库必须已装载到此实例并且不在任何实例中打开
转载:http://www.worlduc.com/blog2012.aspx?bid=19973952 alter database archivelog 2 ; alter database a ...
html页脚显示不出来,CSS实例:让页脚保持在未满屏页面的底部
CSS实例:让页脚保持在未满屏页面的底部互联网发布时间:2008-10-17 19:20:27 作者:佚名我要评论在内容不超过一屏的情况下,当浏览器窗口变小那行页脚文字会跟着向上浮 ...
css实例——太极八卦图
css实例--太极八卦图分析: 可以看成是三个类型的圆组成,分别是大的圆,中等大小的圆,小的圆.这是一个整体的思路,具体的话就是去调整各个圆的位置 HTML代码部分 <!DOCTYPE htm ...
html5导航按钮,CSS实例:超酷的网站导航按钮
CSS实例:超酷的网站导航按钮互联网发布时间:2009-04-02 19:35:20 作者:佚名我要评论网页制作Webjx文章简介:本文一步一步手把手教你打造一个极酷的三层分离的标 ...
js+css实例超漂亮tab切换选项卡代码
效果图: 代码:切换效果,要点击才能实现. js+css实例超漂亮tab切换选项卡代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
html课程表对角线,html+CSS实例效果(6):模拟表格对角线
html+CSS实例效果(6):模拟表格对角线 (2012-01-12 13:51:59) 标签: 杂谈 /p> Transitional//EN" "http://www. ...
jQuery - 综合实例 - 下拉列表框打开指定网站
jQuery - 综合实例 - 下拉列表框打开指定网站 [实例] <html> <head> <script src="jquery-1 ...
HTML和CSS实例讲解
转载地址:http://www.zcool.com.cn/article/ZMTYzNDA0.html 主要讲一个网页的HTML和CSS实例,怎么实现网页的效果图! 实际网页效果图的实现是简单兴趣是 ...

CSS 实例之打开大门

CSS 实例之打开大门相关推荐

最新文章

热门文章