<!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>

CSS3写折纸的更多相关文章

  1. CSS3实现文字折纸效果

    CSS3实现文字折纸效果 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></tit ...

  2. 折纸问题java实现

    /** * 折纸问题 这段代码写的太low了 本人水平有限 哎... 全是字符串了 * @param n * @return * @date 2016-10-7 * @author shaobn */ ...

  3. 1074: [SCOI2007]折纸origami - BZOJ

    Description 桌上有一张边界平行于坐标轴的正方形纸片,左下角的坐标为(0,0),右上角的坐标为(100,100).接下来执行n条折纸命令.每条命令用两个不同点P1(x1,y1)和P2(x2, ...

  4. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  5. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  6. 【BZOJ】1074: [SCOI2007]折纸origami

    http://www.lydsy.com/JudgeOnline/problem.php?id=1074 题意:一开始有一个左上角是(0,100),右下角是(100,0)的纸片,现在可以沿有向直线折n ...

  7. 一些纯css3写的公司logo

      随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些复杂的动画,能替代很多以前js才能完成的工作,css3的作用还不止于此 ...

  8. css3写出飘雪花特效

    大冬天的,飘雪花的特效,你可能要用上了吧.通常情况下用jQuery写飘雪花的特效,但用css3写,其实特别简单,新手一看就懂,那就告别jQuery,用css3轻松搞定飘雪花特效吧! 点击查看特效演示 ...

  9. 1074: [SCOI2007]折纸origami

    Time Limit: 20 Sec  Memory Limit: 162 MBSubmit: 372  Solved: 229[Submit][Status][Discuss] Descriptio ...

随机推荐

  1. 如何给FineReport设置自定义消息提醒工具

    FineReport设计器有自动的消息推送功能,可设置报表定时推送和常规的日报周报推送.官方有自己的消息推送的接口,不过有些用户旺旺希望自己开发,符合自己需求的推送界面. 下面这个方案就从逻辑层面简单 ...

  2. 使用Metrics.NET 构建 ASP.NET MVC 应用程序的性能指标

    通常我们需要监测ASP.NET MVC 或 Web API 的应用程序的性能时,通常采用的是自定义性能计数器,性能计数器会引发无休止的运维问题(损坏的计数器.权限问题等).这篇文章向你介绍一个新的替代 ...

  3. HBase笔记：对HBase原理的简单理解

    早些时候学习hadoop的技术,我一直对里面两项技术倍感困惑,一个是zookeeper,一个就是Hbase了.现在有机会专职做大数据相关的项目,终于看到了HBase实战的项目,也因此有机会搞懂Hbas ...

  4. Ambari服务依赖关系图生成脚本

    1. 生成服务依赖关系 #!/usr/bin/python import sys import commands import json def genDependString(ip): url=&q ...

  5. ABP源码分析二十九：ABP.MongoDb

    这个Module通过建立一个MongoDbRepositoryBase<TEntity> 基类,封装了对MongoDb数据库的操作. 这个module通过引用MongoDB.Driver, ...

  6. 设置Debian8 光秃秃的桌面(图标,窗口样式等)

    在虚拟机里按抓了Debian8, 然后进入桌面后很不习惯,最主要是桌面光秃秃的, 今天终于不小心找到办法了: 按[Win]键, 找到"优化工具"程序; 或者是在右上角的[应用程序] ...

  7. oracle11g 重装操作系统后，如何利用原有oracle表空间文件还原数据库

    最近由于系统重装,在还原dmp备份文件时,由于数据原因(用exp命令导出时表没有导出全部),导致系统不能正常运行.根据网上的信息和个人实际情况,做个记录,便于后用. oracle 导出空表方法: 1. ...

  8. iOS 之项目中遇到的问题总结

    昨天去一家公司面试,面试官问了我在项目开发中遇到过哪些问题,是什么引起的,怎样解决的? 当时由于有点小紧张只说出了一两点,现在就来好好总结一下. 问题: 1.两表联动 所谓的两表联动就是有左右两个表格 ...

  9. <a>与文件下载-(下载一)

    <a>可直接下载xls,doc,rar,zip,exe,js文件(图片跟txt文件是直接打开的) <a href="wKioJlJolKeCIzkCADd3Wf7OPI42 ...

  10. PHP开发环境的配置

    PHP的开发环境主要包括:安装和配置Apache服务器.PHP引擎以及MySQL数据库服务器,另外选用Dreamweaver作为PHP的开发工具. 1.安装和测试Apache 首先下载Apache:官 ...