<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. [轉]C/C++中的volatile使用時機?

    不知各位對volatile(揮發性的)這個字陌不陌生? 我相信大家在一些程式或多或少都看 過這個字眼, 但是究竟要在何種場合用它呢?.當然一定是有需要, C/C++才會有這個保留字, 否則只是增加pr ...

  2. servlet的ServletContext接口

    ServletContext Servlet 上下文 每个web工程都只有一个ServletContext对象,也就是不管在哪个servlet里面,获取到的这个ServletContext对象都是同一 ...

  3. ElasticSearch中分词器组件配置详解

    首先要明确一点,ElasticSearch是基于Lucene的,它的很多基础性组件,都是由Apache Lucene提供的,而es则提供了更高层次的封装以及分布式方面的增强与扩展. 所以要想熟练的掌握 ...

  4. createReadStream().pipe() Callback

    const stream = fs.createReadStream('<filepath>/example.pdf', {bufferSize: 64 * 1024}) stream.p ...

  5. slect fd_set

    select()机制中提供一fd_set的数据结构,实际上是一long类型的数组,每一个数组元素都能与一打开的文件句柄(不管是socket句柄,还是其他文件或命名管道或设备句柄)建立联系,建立联系的工 ...

  6. Java的HashMap和Hashtable有什么区别HashSet和HashMap有什么区别？使用这些结构保存的数需要重载的方法是哪些？

    HashMap与Hashtable实现原理相同,功能相同,底层都是哈希表结构,查询速度快,在很多情况下可以互用 两者的主要区别如下 1.Hashtable是早期JDK提供的接口,HashMap是新版J ...

  7. Java HashMap问题

    1:map集合简述:         我们常用的集合实现类有HashMap.LinkedHashMap.TreeMap,HashTable.HashMap根据key的hashCode值来保存value ...

  8. applicationContext-redis.xml配置文件

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  9. 在使用element-ui搭建的表格中,实现点击"定位"按钮后,屏幕滚动到对应行的位置

    背景: 一个后台管理系统,当管理员登录之后,会存在一个自己的id值, 在一个表格中,当点击"定位"按钮后,屏幕滚动到拥有管理员id的这一行,并且给设置一个高亮的背景 相关知识点: ...

  10. AcWing 139. 回文子串的最大长度 hash打卡

    如果一个字符串正着读和倒着读是一样的,则称它是回文的. 给定一个长度为N的字符串S,求他的最长回文子串的长度是多少. 输入格式 输入将包含最多30个测试用例,每个测试用例占一行,以最多1000000个 ...