找回密码
当前位置：前端开发者 > CSS > 正文

前端网页开发 CSS3实现折纸效果

2018-07-03 分类：CSS 阅读(725) 评论(0)

网页前端开发 pdf|网页开发前端与后端接口|前端开发效果实例

1： buttons.css
2：html结构上的设置，保证正常连接
3：要实现更多效果，可在关键帧部分修改
4：体会框架的作用。比如我发现在很多地方都有设置相同的文字属性，于是将这些属性放在一个class里面保存起来，要使用时在className中添加即可。
框架就是为了方便使用而将常用功能封装起来，用来直接调用。
因此学习重点应该放在最基本的基础上，框架只是方便应用，基础扎实，可快速上手。
5：认真体会标志型变量的使用。比如这里使用布尔型来表示展开和收缩状态。用序列号来标识具体的方框。

代码片段 1

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>css3 transform zhezhi</title>
    <link href=”http://www.bootcss.com/p/buttons/css/buttons.css” rel=”stylesheet”>
    <link href=”http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css” rel=”stylesheet”>
    <script src=”http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js”></script>
    <script type=”text/javascript” src=”http://www.bootcss.com/p/buttons/js/buttons.js”></script>
    <style>
        @-webkit-keyframes open {
            0% {
                -webkit-transform: rotateX(-120deg);
            }
            25% {
                -webkit-transform: rotateX(30deg);
            }
            50% {
                -webkit-transform: rotateX(-15deg);
            }
            75% {
                -webkit-transform: rotateX(8deg);
                box-shadow: inset 0 0 0 0 #ccc;
            }
            100% {
                -webkit-transform: rotateX(0deg);
            }
        }
        @-webkit-keyframes clos {
            0% {
                -webkit-transform: rotateX(0deg);
            }
            100% {
                -webkit-transform: rotateX(-120deg);
            }
        }
        .button-rounded {
            font-family: “STxihei”;
        }
        .wrap {
            width: 400px;
            margin: 0 auto;
            position: relative;
            -webkit-perspective: 800px;
        }
        .wrap h2 {
            width: 100%;
            height: 60px;
            background: orange;
            font: 24px/60px ‘STxihei’;
            color: #fff;
            text-align: center;
            z-index: 10;
        }
        .wrap span {
            display: block;
            width: 100%;
            height: 40px;
            background: #3cc5e2;
            font: 14px/40px ‘STxihei’;
            color: #fff;
            text-align: center;
            border-bottom: 1px solid #128ca6;
            border-top: 1px solid #82e8fe;
            box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 1);
            transition: 1s;
        }
        .wrap div {
            position: absolute;
            top: 42px;
            left: 0;
            width: 100%;
            -webkit-transform-style: preserve-3d;
            -webkit-transform-origin: top;
            -webkit-transform: rotateX(-120deg);
            z-index: -1;
        }
        .wrap>div:nth-of-type(1) {
            top: 60px;
        }
        .wrap .open {
            -webkit-transform: rotateX(0deg);
            -webkit-animation: 1.5s open ease-in;
        }
        .wrap .open>span {
            box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 0);
        }
        .wrap .clos {
            -webkit-transform: rotateX(-120deg);
            -webkit-animation: 0.7s clos ease;
        }
        .wrap .clos>span {
            box-shadow: inset 0 0 100px 20px rgba(0, 0, 01);
        }
    </style>
</head>
<body>
    <a href=”javascript:;” class=”button button-3d button-primary button-rounded”>OPEN</a>
    <div id=”wrap” class=”wrap”>
        <h2>The WillPower Instinct</h2>
        <div>
            <span>Document</span>
            <div>
                <span>jquery</span>
                <div>
                    <span>Argularjs</span>
                    <div>
                        <span>Backbone</span>
                        <div>
                            <span>Mobile</span>
                            <div>
                                <span>Bootstrap</span>
                                <div>
                                    <span>MIUI</span>
                                    <div>
                                        <span>Dash</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type=”text/javascript”>
    window.onload = function () {
        var oBtn = document.getElementsByTagName(‘a’)[0];
        var oWrap = document.getElementById(‘wrap’);
        var aDiv = oWrap.getElementsByTagName(‘div’);
        var i = 0;
        var timer = null;
        var iDelay = 200;
        var isOff = true;
        oBtn.onclick = function () {
            if (isOff) {
                i = 0;
                timer = setInterval(function () {
                    aDiv[i].className = ‘open’;
                    if (i == aDiv.length – 1) {
                        clearInterval(timer);
                        oBtn.innerHTML = ‘Close’;
                    }
                    i++;
                }, iDelay);
            }
            else {
                i = aDiv.length – 1;
                timer = setInterval(function () {
                    aDiv[i].className = ‘clos’;
                    if (i == 0) {
                        clearInterval(timer);
                        oBtn.innerHTML = ‘Open’;
                    }
                    i–;
                }, iDelay);
            }
            isOff = !isOff;
        }
    }
</script>
</html>

前端开发找不到工作怎么办?|web前端开发工作累吗?|web前端开发岗位需求

赞(0)
前端开发者 » 前端网页开发 CSS3实现折纸效果
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论