<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. HTMl中Meta标签和meta property=og标签含义

    meta是head区的一个辅助性标签.其主要作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等! me ...

  2. 一、hibernate环境搭建

    hibernate环境搭建 下载hibernate hibernate的jar 连接数据库的jar 解压hibernate,解压后目录结构 documentation :对应hibernate开发文档 ...

  3. 【记录】centOS 搭建logstash +docker搭建elasticsearch伪集群+kibana链接集群elasticsearch节点

    [注意]本文主要用于自我记录,注释较少. 安装logstash 1.上传logstash-6.4.3.tar.gz到服务中 2.tar –zxvf logstash-6.4.3.tar.gz 3.cd ...

  4. Educational Codeforces Round 60 (Rated for Div. 2) E. Decypher the String

    题目大意:这是一道交互题.给你一个长度为n的字符串,这个字符串是经过规则变换的,题目不告诉你变换规则,但是允许你提问3次:每次提问你给出一个长度为n的字符串,程序会返回按变换规则变换后的字符串,提问3 ...

  5. 【Luogu】【关卡2-1】简单的模拟（2017年10月）

    任务说明:开始普及组的训练!所谓模拟,就是直接根据题意编写,思维难度简单. 铺地毯 进制转换 多项式输出 机器翻译 排座椅 笨小猴 都是简单模拟题  

  6. Kirinriki

    Kirinriki 定义两个长度相等的字符串\(\{a_i\},\{b_i\}\)的距离为\(\sum_{i=1}^n|a_i-b_{n-i+1}|\)(其中n为字符串的长度),给出一个字符串\(\{ ...

  7. bootstrap 好看的上传组件

    <!DOCTYPE html> <html> <head> <title></title> <link rel="style ...

  8. Spring AOP 总结

    AOP的基础是Java动态代理 Java中代理的实现一般分为三种:JDK静态代理.JDK动态代理以及CGLIB动态代理. 静态代理: 代理类与被代理类实现同一个接口,在代理类中持有一个被代理对象的引用 ...

  9. PHP FILTER_UNSAFE_RAW 过滤器

    定义和用法 FILTER_UNSAFE_RAW 过滤器不进行任何过滤,去除或编码特殊字符. 该过滤器删除那些对应用程序有潜在危害的数据.它用于去除标签以及删除或编码不需要的字符. 如果不规定标志,则该 ...

  10. PHP ftp_get() 函数

    定义和用法 ftp_get() 函数从 FTP 服务器上下载一个文件并保存到本地一个文件中. 如果成功,该函数返回 TRUE.如果失败,则返回 FALSE. 语法 ftp_get(ftp_connec ...