<style>

        .door {

            width: 288px;

            height: 153px;

            border: 2px solid #333;

            margin: 150px auto;

            background: url(../img/01.png) no-repeat;

            position: relative;

            perspective: 500px;  /* 设置盒子透明 */

        }

        .door-l,

        .door-r {

            position: absolute;

            top: 0;

            width: 50%;

            height: 100%;

            background: pink;

            transition:all 1s;   /* 盒子过渡效果 */

        }

        .door-r{

            right: 0;

            border-left: 2px solid #333;

            transform-origin:right;  /* 设置盒子沿right边旋转 */

        }

        .door-l {

            left: 0;

            border-right: 2px solid #333;

            transform-origin:left; /* 设置盒子沿left边旋转 */

        }

        .door-l::before,

        .door-r::before {

            content: "";

            position: absolute;

            top:50%;

            width: 20px;

            height: 20px;

            border: 1px solid #000;

            border-radius: 50%;

            transform:translateY(-50%); /* 设置盒子垂直方向 */

        }

        .door-r::before{

            left:5px;

        }

        .door-l::before{

            right:5px;      /* 设置门扣的位置 */

        }

        .door:hover .door-l{

            transform:rotateY(-130deg);  

        }

        .door:hover .door-r{

            transform:rotateY(130deg);   /* 设置门沿Y轴旋转的角度 */

        }

    </style>

</head>

<body>

    <div class="door">

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

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

    </div>

</body>

　　

案例-开门效果CSS3的更多相关文章

  1. flip 翻转效果 css3实现

    1.实现代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...

  2. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  3. 滑动开关效果 css3滑动开关】纯CSS3代码实现滑动开关效果-css3滑动效果-css3左右滑动

    今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动 ...

  4. HTML5和CSS3实现3D转换效果 CSS3的3D效果

    上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...

  5. 图片触及翻转效果 css3

    实现图片由左向右飞入回到最初设定位置 ,鼠标浮上去旋转显示另一张图片效果: html: <!DOCTYPE HTML> <html> <head> <meta ...

  6. 遮罩效果 css3

    CSS3提供了遮罩效果,这是以前CSS2中比较难实现的一个新特性,配合SVG或者canvas同样也可以实现遮罩效果,他的效果就如下图所示: 简单的说就是在一个层上面加一个过滤层,过滤层透明度越低,底层 ...

  7. 简单的圆形图标鼠标hover效果 | CSS3教程

    演示 本教程将和大将分享一些简单的圆形图标在鼠标hover时的动画效果.这种效果在不少时尚的酷站上都有.本教程中的例子主要是利用在a元素的伪元素上使用CSS transitions和animation ...

  8. Javascript进阶篇——总结--DOM案例+选项卡效果

    断断续续的把慕课的JavaScript基础和进阶看完了,期间不怎么应用有的都忘记了,接下来多开始写些效果,进行实际应用. 制作一个表格,显示班级的学生信息. 1. 鼠标移到不同行上时背景色改为色值为 ...

  9. css案例 - 评分效果的星星✨外衣

    纳尼?什么星星外衣?好,直接上图比较能说清楚: 仔细看会发现规律:可以根据百分比/分值动态改变高亮星星的个数. 分步骤图: 这种效果,如果遇到一分一个星,没有半星(或者有也可以,直接加一个半星的类名) ...

随机推荐

  1. 二、检索语句 SELECT、ORDER BY、WHERE

    介绍如何使用SELECT语句从表中检索一个或多个数据列   第二章: SELECT语句 SQL语句可以在一行给出,也可以分成许多行,分成多行更容易调试. 多条SQL语句必须以分号 分隔.多数DBMS不 ...

  2. Source object main.o has EABI version 0, but target ../../../bin/ad has EABI version 5

    编译的时候,遇到了一些问题:Source object main.o has EABI version 0, but target ../../../bin/ad has EABI version 5 ...

  3. Python文件路径操作

    print(os.environ.get('HOME')) # 打印`HOME`这个环境变量 /Users/<> file_path = os.environ.get('HOME') + ...

  4. Java自定义注解Annotation的使用

    从 jdk5开始,Java增加了对元数据的支持,也就是Annotation,Annotation其实就是对代码的一种特殊标记,这些标记可以在编译,类加载和运行时被读取,并执行相应的处理.当然刚刚说了, ...

  5. HIVE的Shell操作

    1.Hive支持的一些命令 退出使用quit或exit离开交互式外壳. set key = value使用它来设置特定配置变量的值. 这里要注意的一件事是,如果您对变量名拼写错误,cli将不会显示错误 ...

  6. Shiro学习（15）单点登录

    Shiro 1.2开始提供了Jasig CAS单点登录的支持,单点登录主要用于多系统集成,即在多个系统中,用户只需要到一个中央服务器登录一次即可访问这些系统中的任何一个,无须多次登录.此处我们使用Ja ...

  7. luoguP1313 [NOIp2011]计算系数 [组合数学]

    题目描述 给定一个多项式(by+ax)^k,请求出多项式展开后x^n*y^m 项的系数. 输入输出格式 输入格式: 输入文件名为factor.in. 共一行,包含5 个整数,分别为 a ,b ,k , ...

  8. CSS3 图形变换

    1.zoom  和  transform:scale  的区别   :    http://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-sc ...

  9. nuxt 2.0采坑计之 （引入静态文件css）

    nuxt 2.0采坑计之静态文件css 外部引入css 全局引用方法为   (在nuxt.config.js配置中在   module.exports = {}  中添加) head: { meta: ...

  10. Windows 驱动模型的发展历史

    直接从win95/98说起,因为之前的系统基本上没有保护模式的概念,程序员可以直接修改任意内存的数据.在95/98中采用的内核开发模型是VxD(虚拟设备驱动),在dos时期,程序认为它们拥有系统的一切 ...