<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. __init__ 和__new__的区别

    __init__和__new__的区别 __init__是当实例对象创建完成后被调用的,然后设置对象属性的一些初始值. __new__是在实例创建之前被调用的,因为它的任务就是创建实例然后返回该实例, ...

  2. HashSet源码解析笔记

    HashSet是基于HashMap实现的.HashSet底层采用HashMap来保存元素,因此HashSet底层其实比较简单. HashSet是Set接口典型实现,它按照Hash算法来存储集合中的元素 ...

  3. redis实现分布式锁需要考虑的因素以及可重入锁实现

    死锁 错误例子 解决方式  防止死锁 通过设置超时时间  不要使用setnx key   expire 20  不能保证原子性 如果setnx程序就挂了 没有执行expire就死锁了  reidis2 ...

  4. tf.placeholde函数解释与用法

    函数原型:tf.placeholder(dtype, shape=None, name=None) 使用说明:该函数用于得到传递进来的真实的训练样本.同时也可以理解为形参, 用于定义过程,在执行的时候 ...

  5. Codeforces 1182D Complete Mirror 树的重心乱搞 / 树的直径 / 拓扑排序

    题意:给你一颗树,问这颗树是否存在一个根,使得对于任意两点,如果它们到根的距离相同,那么它们的度必须相等. 思路1:树的重心乱搞 根据样例发现,树的重心可能是答案,所以我们可以先判断一下树的重心可不可 ...

  6. 注册Bean

    <spring源码深度解析>笔记 1.给容器中注册组件 (1).包扫描+组件注解: (2).@Bean(导入第三方包里面的组件): (3).@Import给容器中快速的导入一个组件: 2. ...

  7. MySQL - 两种存储引擎 (MyISAM PK InnoDB) + MVCC

    总结 1.两种存储引擎各有各的有点,MyISAM专注性能,InnoDB专注事务.两者最大的区别就是InnoDB支持事务,和行锁. 2.InnoDB采用MVCC(Multi-Version Concur ...

  8. Windows version PE System Key

    { }

  9. Unity NGUI Download

    { 链接:https://pan.baidu.com/s/1hPf4brhN8RvcKP7HSwphHw  提取码:0iim }

  10. 如何重置Magento管理用户、角色和资源的权限

    场景1:所有的资源权限被设置为管理角色 步骤1:获取当前的管理角色详细信息 SELECT * FROM admin_role WHERE role_name = 'Administrators' /* ...