<!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. 用SecureCRT连接虚拟机中的Linux系统(Ubuntu)

    今天突然练习linux命令行的时候,想在window中联系linux命令行.经过一番dudu找到了一个不错的的工具(SecureCRT--意思安全)就是用SSH链接linux主机.推荐大家使用.毕竟w ...

  2. 如何开发FineReport的自定义控件？

    FineReport作为插件化开发的报表软件,有些特殊需求的功能需要自己开发,开发的插件包帆软官方有提提供,可以去帆软论坛上找,本文将主要介绍如何开发一个自定义控件,这里讲讲方法论. 第一步:实例化一 ...

  3. spring boot1

    spring boot 玩转spring boot--快速开始   开发环境: IED环境:Eclipse JDK版本:1.8 maven版本:3.3.9 一.创建一个spring boot的mcv ...

  4. ReactNative入门（安卓）——API（上）

    Alert - 弹窗 通过 Alert.alert() 方法调用唤起原生弹窗,点击会触发 onPress 回调(参考下方代码)并清除弹窗. import React, { AppRegistry, C ...

  5. 猫哥网络编程系列：详解 BAT 面试题

    从产品上线前的接口开发和调试,到上线后的 bug 定位.性能优化,网络编程知识贯穿着一个互联网产品的整个生命周期.不论你是前后端的开发岗位,还是 SQA.运维等其他技术岗位,掌握网络编程知识均是岗位的 ...

  6. [Java 缓存] Java Cache之 Guava Cache的简单应用.

    前言 今天第一次使用MarkDown的形式发博客. 准备记录一下自己对Guava Cache的认识及项目中的实际使用经验. 一: 什么是Guava Guava工程包含了若干被Google的 Java项 ...

  7. redis成长之路——（七）

    扩展性封装 虽说现在StackExchange.Redis免费,万一到时候和servicestack.redis一样要收费呢,所以先留一口,后续的可以再处理 实例代码点击这里查看 redis成长之路- ...

  8. 非关系型数据库来了,CRL快速开发框架升级到版本4

    轮子?,我很任性,我要造不一样的轮子,同时支持关系型和非关系型的框架有没有 新版数据查询作了些调整,抽象了LabmdaQueryy和DBExtend,升级到版本4,非关系数据库MongoDB被支持了! ...

  9. CRL快速开发框架升级到3.1

    CRL是一款面向对象的轻量级ORM框架,本着快速开发,使用简便的原则,设计为 无需关心数据库结构,CRL自动维护创建,即写即用(CRL内部有表结构检查机制,保证表结构一致性) 无需第三方工具生成代理类 ...

  10. jvm系列(二):JVM内存结构

    JVM内存结构 所有的Java开发人员可能会遇到这样的困惑?我该为堆内存设置多大空间呢?OutOfMemoryError的异常到底涉及到运行时数据的哪块区域?该怎么解决呢?其实如果你经常解决服务器性能 ...