利用CSS3实现开门效果实例源码


Posted in HTML / CSS onAugust 22, 2016

先来看看效果图

利用CSS3实现开门效果实例源码

利用CSS3实现开门效果实例源码

以下实例源码

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css3开门</title>
<style type="text/css">
.door{ position:relative; width:400px; 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}
</style>

</head>
<body>
<div class="door">
<div class="door-left">1</div>
<div class="door-right">1</div>
</div></p> <p><script type="text/javascript">
</script>
</body>
</html>

总结

以上就是利用CSS3实现开门效果的全部内容,刚兴趣的朋友们自己动手试试看效果,希望本文对大家学习使用CSS3能有所帮助。

HTML / CSS 相关文章推荐
CSS3属性box-shadow使用详细教程
Jan 21 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 #HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 #HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 #HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 #HTML / CSS
css3的过滤效果简单实例
Aug 03 #HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 #HTML / CSS
关于box-sizing的全面理解
Jul 28 #HTML / CSS
You might like
php中iconv函数使用方法
2008/05/24 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
简单JS代码压缩器
2006/10/12 Javascript
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
Python Celery多队列配置代码实例
2019/11/22 Python
Pytorch之contiguous的用法
2019/12/31 Python
巴西手表购物网站:eclock
2019/03/19 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
美丽乡村建设实施方案
2014/03/23 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
学习作风建设心得体会
2014/10/22 职场文书
鉴史问廉观后感
2015/06/10 职场文书