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

本案例主要运用到了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:;

            transition: all 0.5s;

            left:;

            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>

CSS 实例之打开大门的更多相关文章

  1. CSS实例：翻转图片、滚动图片栏、打开大门

    CSS 翻转图片主要用到的技术除了3D翻转和定位 ,还用到了一个属性 backface-visibility:visable|hidden;该属性主要是用来设定元素背面是否可见. 效果图如下: 具体的 ...

  2. CSS实例

    CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...

  3. 以多个实例方式打开Notepad++

    Right-click any Notepad++ shortcut. Select Properties. Move to the Shortcut tab. In the end of the T ...

  4. LESS CSS 实例

    值得参考的 10 个 LESS CSS 实例   2 收藏(185) LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员.你可以使用变量.函数.混合 ...

  5. ORA-01126: 数据库必须已装载到此实例并且不在任何实例中打开

    原因:修改归档模式的操作只能在 mount 状态下进行,不能处于 open 状态. SQL> alter database archivelog;alter database archivelo ...

  6. CSS：CSS 实例

    ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...

  7. CSS实例 display display 边距

    CSS学习大纲 在标签上设置style属性: background-color:#2459a2 ; height:48px ; 编写CSS样式: 1.标签的style属性 2.写在head里面,sty ...

  8. CSS实例练习

    蓝色导航为图片,用background-image实现. 排版用到ul,li标签,下划线运用border-bottom中的dashed,右边文字用到CSS浮动float. 实例: 代码: <!D ...

  9. div+css实例教程

    DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离. 对于初学者来说,可能比较模糊不熟悉.毕竟,样式布局需要通 ...

随机推荐

  1. Spring Boot + Redis

    启动redis docker run --name redisServer -P -d redis redis自带客户端,启动客户端 docker run -it --link redisServer ...

  2. 全网最详细的zkfc启动以后，几秒钟以后自动关闭问题的解决办法（图文详解）

    不多说,直接上干货! 问题详情 情况描述如题所示,zkfc启动以后,几秒钟以后自动关闭. 解决办法: 1.检查下每台机器的时间是否同步: 2.检查下每台机器的防火墙是否关闭: 3.查看zkfc的日志路 ...

  3. 学会四招让你在linux下安装程序变得简单

    一.背景 由于最近想自己摸索一些linux下的东西,开始玩起了Linux系统,在安装软件的过程中有诸多的不解和困惑,现在终于搞明白了具体是怎么样的安装步骤和过程,先分享给你们同时也方便自己复习查阅. ...

  4. JavaScript事件模型

    1.什么是事件? 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式的模型,支持页面的行为 ...

  5. 前端通信：ajax设计方案（八）--- 设计请求池，复用请求，让前端通信快、更快、再快一点

    直接进入主题,本篇文章有点长,包括从设计阶段,到摸索阶段,再到实现阶段,最后全面覆盖测试阶段(包括数据搜集清洗),还有与主流前端通信框架进行对比PK阶段. 首先介绍一下一些概念: 1. 浏览器的并发能 ...

  6. SkipList 跳跃表

    引子 考虑一个有序表:14->->34->->50->->66->72 从该有序表中搜索元素 < 23, 43, 59 > ,需要比较的次数分别为 ...

  7. Restful API 设计参考原则

    在项目中,需要为后台服务撰写API.刚开始接触的时候,并没有考虑太多,就想提供URL,服务端通过该URL进行查询.创建.更新等操作即可.但再对相关规范进行了解后,才发现,API的设计并没有那么简单,远 ...

  8. java设计模式-菜鸟网络

    http://www.runoob.com/design-pattern/singleton-pattern.html

  9. jmeter安装教程与新手入门(附jdk安装教程)

    一.前言 最近要对网站做性能测试,提到了并发数测试,查了下,还是决定使用jmeter来完成这项测试,这里总结了jmeter完整的安装教程,附上新手使用教程. 二.jmeter安装 1.jdk安装(jm ...

  10. zoj 2724 Windows Message Queue（使用priority_queue容器模拟消息队列）

    题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2724 题目描述: Message queue is the b ...