利用CSS3实现开门效果实例源码
【介绍】CSS3神奇开门效果,亲自体验,令人惊艳!
你是否曾被某些网站独特的开门动画所吸引,好奇其背后的技术实现?今天,我将带你领略利用CSS3实现的开门效果,让你轻松掌握这一技巧,为你的网页增添独特魅力。
让我们先睹为快,欣赏一下这个神奇的开门效果。点击这里查看效果图,感受瞬间的视觉盛宴。没错,这就是我们将要学习的内容。
接下来,让我们看看实现这一效果的源码。源码如下:
.door{ position:relative; width:px; height:300px; overflow:hidden; border:2px solid 000; background:000;}
.door:before,.door:after{ content:''; position:absolute; left:0; width:0; height:0; overflow:hidden; border-color:000 transparent transparent transparent; border-style:solid; border-width:0 200px; z-index:2; transition:all .8s ease;}
.door:before{ top:0;}
.door:after{ bottom:0; border-color:transparent transparent 000 transparent;}
.door:hover:before,.door:hover:after{ border-width:40px 200px;}
.door-left, .door-right{ position:relative; float:left; width:50%; height:100%; background: 64DE27; box-sizing:border-box; transition:all .5s ease;}
.door-left{ border-right:2px solid 000; -webkit-transform-origin:0 0;}
.door-left:before,.door-right:before{ content:''; position:absolute; width:10px; height:10px; top:50%; margin-top:-5px; border-radius:50%; background:000;}
.door-left:before{ right:5px;}
.door-right:before{ left:5px;}
.door-right{ border-left:2px solid 000; -webkit-transform-origin:100% 0;}
.door:hover .door-left{ -webkit-transform:rotateY(-90deg); transition:transform 2s Linear}
.door:hover .door-right{ -webkit-transform:rotateY(90deg); transition:transform 2s Linear}
这段代码实现了CSS3的开门效果。当你将鼠标悬停在门上时,左右两部分将围绕中心点旋转,呈现出开门的效果。是不是很神奇?这就是CSS3的魅力所在!
介绍了如何利用CSS3实现开门效果,通过详细的源码,让大家对CSS3的旋转、过渡等特性有了更深入的了解。希望对大家学习使用CSS3能有所帮助。赶快动手试试吧,让你的网页增添一抹亮色!
网站设计
- 利用CSS3实现开门效果实例源码
- CSS 实现元素较宽不能被完全展示时将其隐藏的方
- ai怎么设计下金蛋的母鸡插画-
- 12306身份怎么核验-12306身份信息核验
- 用New iPad看电影的2大常用方法(图文教程)
- 内部结构到底怎么样-小米米家行车记录仪拆解图
- 浏览器主页被改 注册表被恶意锁定怎样解除-
- 优秀的CSS 框架整理
- 暗影精灵6 AMD版怎么样 暗影精灵6 AMD版笔记本评测
- 华为MateBook D 14值不值得买 华为MateBook D 14酷睿版
- input type是什么意思及常用限制input的方法
- WINDOWS XP登陆来破解pubwin EP 5.0的方法
- AutoCAD Electrical2019怎么创建项目文件-
- 网络入侵也玩双通道
- html 内联元素和html 块级元素概述及区别
- Win10 Edge浏览器开发者在线交流会 九问九答揭露新