CSS3实现折纸效果
来源:互联网 发布:2015最新dj网络歌曲 编辑:程序博客网 时间:2024/04/30 02:17
1.折纸布局很特别:
DIV里套DIV,主要为了在实现折叠时,能够连接起来,中间不会开出一条缝,一种很巧妙的方式
<div id="wrap"><h2>我是标题奥</h2> <div> <span>选项1</span> <div> <span>选项2</span> <div> <span>选项3</span> <div> <span>选项4</span> <div> <span>选项5</span> <div> <span>选项6</span> <div style=""> <span>选项7</span> </div> </div> </div> </div> </div> </div> </div></div>
2.
#wrap div{ position:absolute<span style="color:#ff0000;">;top:32px</span>; width:100%;left:0; -webkit-transform-style:preserve-3d; -webkit-transform-origin:top;-webkit-transform:rotateX(-120deg);}因为DIV是嵌套的,top是相对于上一个DIV,就可以实现连接竖向排列
3.实现向下运动渐变的效果,使用了box-shadow
#wrap span{ display:block;height:30px;background:#9F0; font:12px/30px "宋体"; color:#fff; text-indent:20px; <span style="color:#ff0000;">box-shadow:inset 0 0 0 20px rgba(0,0,0,1); transition:1s</span>;}
4.防止按钮点击多次,速度加快
if(oTimer)//已经开启,什么都不做{return;}
clearInterval(oTimer);oTimer=null;
整体代码:
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>@-webkit-keyframes open{0%{-webkit-transform:rotateX(-120deg);}25%{-webkit-transform:rotateX(30deg);}50%{-webkit-transform:rotateX(-15deg);}75%{-webkit-transform:rotateX(8deg);}100%{-webkit-transform:rotateX(0deg);}}@-webkit-keyframes clos{0%{-webkit-transform:rotateX(0deg);}100%{-webkit-transform:rotateX(-120deg);}}body{margin:0;}#wrap{ width:160px;margin:30px auto; position:relative; -webkit-perspective:800px;}#wrap h2{ height:40px;background:#F60; color:#fff; font: bold 16px/40px "微软雅黑"; text-align:center;margin:0; position:relative;z-index:10;}#wrap div{ position:absolute;top:32px; width:100%;left:0; -webkit-transform-style:preserve-3d; -webkit-transform-origin:top;-webkit-transform:rotateX(-120deg);}#wrap span{ display:block;height:30px;background:#9F0; font:12px/30px "宋体"; color:#fff; text-indent:20px; box-shadow:inset 0 0 0 20px rgba(0,0,0,1); transition:1s;}#wrap>div{top:40px;}#wrap .show{-webkit-animation:2s open;-webkit-transform:rotateX(0deg);}#wrap .hide{-webkit-animation:0.8s clos;-webkit-transform:rotateX(-120deg);}#wrap .show>span{ box-shadow:inset 0 0 0 20px rgba(0,0,0,0);}#btn{ position:absolute;}</style></head><body><input type="button" value="按钮" id="btn" /><div id="wrap"><h2>我是标题奥</h2> <div> <span>选项1</span> <div> <span>选项2</span> <div> <span>选项3</span> <div> <span>选项4</span> <div> <span>选项5</span> <div> <span>选项6</span> <div style=""> <span>选项7</span> </div> </div> </div> </div> </div> </div> </div></div><script>var oBtn=document.getElementById("btn");var oWrap=document.getElementById("wrap");var aDiv=oWrap.getElementsByTagName("div");var iDelay=200;var oTimer=null;var i=0;var bOff=true;oBtn.onclick=function(){if(oTimer)//已经开启,什么都不做{return;}if(bOff){i=0;oTimer=setInterval(function(){aDiv[i].className="show";i++;if(i==aDiv.length){clearInterval(oTimer);oTimer=null;bOff=false;}},iDelay);}else{i=aDiv.length-1;oTimer=setInterval(function(){aDiv[i].className="hide";i--;if(i<0){clearInterval(oTimer);bOff=true;oTimer=null;}},iDelay);}};</script></body></html>
0 0
- CSS3实现折纸效果
- 折纸效果
- 纯CSS实现3D折纸效果
- html5菜单折纸效果
- css3实现闪光效果
- css3实现按钮开关效果
- css3实现手风琴效果
- css3实现冲击波效果
- CSS3实现气泡效果
- CSS3实现轮播图效果
- Css3实现三角效果
- css3实现幻灯片效果
- CSS3实现三角形效果
- css3实现翻牌效果
- 折纸问题 C++实现
- 【CSS3】 CSS3实现“图片阴影”效果
- (Android特效)—OriSim3D-Android--opengl 实现各种逼真折纸效果
- CSS3 实现圆角效果
- 设备安装
- android使用自定控件实现城市列表展示并且实现当前城市定位
- Spark组件之GraphX学习9--使用pregel函数求单源最短路径
- C语言中指针变量使用时常见的几个问题
- JavaWeb学习总结(二)——Tomcat服务器学习和使用(一)
- CSS3实现折纸效果
- jquery,javascript,easyUI,取值
- MyEclipse中配置tomcat的JVM内存
- C语言6(指针)
- Unreal Engine 4 —— 冷却UI的制作
- 百度搜索小技巧
- JavaWeb学习总结(三)——Tomcat服务器学习和使用(二)
- 流程图制作之Giffy Diagrams
- Redis安装与使用