<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. 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

    基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...

  2. 关于原生js中ie的attacheEvent事件用匿名函数改变this指向后,不能用detachEvent删除绑定事件的解决办法?

    博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/28/%e5%85%b3%e4%ba%8e%e5%8e%9f%e7%94%9fjs%e ...

  3. Python面试题之这两个参数是什么意思:*args,**kwargs?我们为什么要使用它们?

    如果我们不确定要往函数中传入多少个参数,或者我们想往函数中以列表和元组的形式传参数时,那就使要用*args: 如果我们不知道要往函数中传入多少个关键词参数,或者想传入字典的值作为关键词参数时,那就要使 ...

  4. linux/unix下setuid/seteuid/setreuid/setresuid

    其中setresuid()具有最清晰的语法: setresuid()被执行的条件有: ①当前进程的euid是root ②三个参数,每一个等于原来某个id中的一个 如果满足以上条件的任意一个,setre ...

  5. sed(seream editor)流编辑器

    sed:既然是流编辑器,自然只会是改变输入输出流的内容,对源文件并不进行丝毫修改,不信的话,你可以用cat sourcefille试试啊~ 另,如果你想将修改保存到源文件,可以用输入输出重定向啊~ s ...

  6. springMVC 框架的xml配置文件的说明

    springMVC框架xml文件配置的说明,直接上代码: 我们介绍四个xml文件配置以及xml内容的理解:application.xml.spring-mvc.xml.pom.xml 和 web.xm ...

  7. 《代码大全2》读书笔记 Week8

    这一周博主阅读了<代码大全2>第11章至第13章,第三部分——"变量"就结束了,第四部分作者将转入语句的讨论. 第十一章作者详细阐述了变量名的有效命名规则,第十二和十三 ...

  8. Oracle备份统计信息

    Oracle可以通过DBMS_STATS.GET_TABLE_STATS 收集表的统计信息,一般的收集方法如下: DBMS_STATS.GATHER_TABLE_STATS(OWNNAME => ...

  9. 【Luogu】【关卡2-6】贪心(2017年10月)

    任务说明:贪心就是只考虑眼前的利益.对于我们人生来说太贪是不好的,不过oi中,有时是对的. P1090 合并果子 有N堆果子,只能两两合并,每合并一次消耗的体力是两堆果子的权重和,问最小消耗多少体力. ...

  10. MATLAB生成exe脱离matlab运行可执行程序

    https://blog.csdn.net/u013007900/article/details/53485204 侵权即删. ———————————————— 版权声明:本文为CSDN博主「小木匠_ ...