1. <style>
  2.         .door {
  3.             width: 288px;
  4.             height: 153px;
  5.             border: 2px solid #333;
  6.             margin: 150px auto;
  7.             background: url(../img/01.png) no-repeat;
  8.             position: relative;
  9.             perspective: 500px;  /* 设置盒子透明 */
  10.         }
  11.         .door-l,
  12.         .door-r {
  13.             position: absolute;
  14.             top: 0;
  15.             width: 50%;
  16.             height: 100%;
  17.             background: pink;
  18.             transition:all 1s;   /* 盒子过渡效果 */
  19.         }
  20.         .door-r{
  21.             right: 0;
  22.             border-left: 2px solid #333;
  23.             transform-origin:right;  /* 设置盒子沿right边旋转 */
  24.         }
  25.         .door-l {
  26.             left: 0;
  27.             border-right: 2px solid #333;
  28.             transform-origin:left; /* 设置盒子沿left边旋转 */
  29.         }
  30.         .door-l::before,
  31.         .door-r::before {
  32.             content: "";
  33.             position: absolute;
  34.             top:50%;
  35.             width: 20px;
  36.             height: 20px;
  37.             border: 1px solid #000;
  38.             border-radius: 50%;
  39.             transform:translateY(-50%); /* 设置盒子垂直方向 */
  40.         }
  41.         .door-r::before{
  42.             left:5px;
  43.         }
  44.         .door-l::before{
  45.             right:5px;      /* 设置门扣的位置 */
  46.         }
  47.         .door:hover .door-l{
  48.             transform:rotateY(-130deg);  
  49.  
  50.         }
  51.         .door:hover .door-r{
  52.             transform:rotateY(130deg);   /* 设置门沿Y轴旋转的角度 */
  53.  
  54.         }
  55.     </style>
  56. </head>
  57.  
  58. <body>
  59.     <div class="door">
  60.         <div class="door-l"></div>
  61.         <div class="door-r"></div>
  62.     </div>
  63. </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. 分布式-技术专区-Redis分布式锁原理实现

    在很多场景中,我们为了保证数据的最终一致性,需要很多的技术方案来支持,比如分布式事务.分布式锁等.那具体什么是分布式锁,分布式锁应用在哪些业务场景.如何来实现分布式锁呢?今天来探讨分布式锁这个话题. ...

  2. pytest_参数化之3*3

    import pytesttest_user_data1=[{'user':'linda','password':'888888'}, {'user':'servenruby','password': ...

  3. sql server 事务隔离性 snapshot 、read committed说明

    一. --该 read committed 默认事务隔离级别 在 systemuser修改事务未完成时 select * from [SystemUser] where id=62; 该语句是不可读取 ...

  4. 群晖NAS被攻击

    上周给新员工办理入职的时候,因为我们有自己的NAS系统,给他们建账号的时候,突然发现群晖无法登陆,很奇怪. 然后查看群晖系统,发现网络能Ping 通,但是群晖管理界面无法打开,一开始以为机房天热,硬盘 ...

  5. PHP创建多级目录文件夹

    PHP创建多级目录的代码实例如下: <?php function create_dir($dirName) { // 去除输入目录名中的空格部分 $dirName = trim($dirName ...

  6. PHP水仙花数的实现

    php水仙花数是什么? 水仙花数是指一个 n 位数 ( n≥3 ),它的每个位上的数字的 n 次幂之和等于它本身.(例如:1^3 + 5^3 + 3^3 = 153)三位的水仙花数共有4个:153,3 ...

  7. 58. jdk1.5新特性之静态导入

    jdk1.5新特性之--------静态导入 作用:简化书写(在我们使用静态方法的时候要用  类名.方法名的方式调用.而用静态导入只需要写方法名就可以调用) 语法:    1.作用于一个方法:     ...

  8. 【JavaWeb项目】一个众筹网站的开发（八）后台页面详细设置

    一.user.jsp改造 删除引入菜单 抽取导航栏 nav-bar.jsp,删除引入导航栏 删除引入main.jsp的到好烂 数据库里添加url 报错,url不对 没有/ url正确 action=& ...

  9. 用JavaScript写一个JD放大镜

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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