CSS3 transition 制作 简单的翻书效果。

前端开发转成app|web前端开发有什么岗位|公司里开发前端一般用什么软件

代码片段 1

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <title>前端开发60个html标签CSS3翻书效果</title>
    <style type=”text/css”>
        html,
        body,
        div,
        ul,
        li,
        p,
        span {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html,
        body {
            height: 100%
        }
        body {
            background-color: #999;
            padding: 8px;
        }
        ul {
            list-style: none;
        }
        #books {
            display: block;
            width: 980px;
            height: 100%;
            margin: auto;
            position: relative;
            counter-reset: page;
        }
        #books li {
            position: absolute;
            top: 0;
            width: 50%;
            height: 100%;
            background-color: #fff;
            transition-duration: 0.5s;
            transition-property: transform, opacity;
            transform-style: preserve-3d;
            box-shadow: 0px 0px 12px #000;
        }
        #books li:nth-child(odd) {
            left: 50%;
            transform: rotateY(0deg);
            transform-origin: 0 50% 0;
            opacity: 1;
        }
        #books li:nth-child(even) {
            left: 0;
            background: linear-gradient(90deg, #fff 92%, #eee 99%, #ccc 100%);
            transform: rotateY(180deg);
            transform-origin: 100% 50% 0;
            opacity: 0;
        }
        #books li.rl:nth-child(odd) {
            transform: rotateY(180deg);
            opacity: 0;
        }
        #books li.rl:nth-child(even) {
            transform: rotateY(0deg);
            opacity: 1;
        }
        #books li:nth-child(odd)::before {
            right: 0;
        }
        #books li:nth-child(even)::before {
            left: 0;
        }
        #books li:before {
            content: counter(page);
            counter-increment: page;
            position: absolute;
            font: 12px/1em “宋体”;
            padding: 18px;
            bottom: 0;
        }
        #books li:after {
            content: “”;
            bottom: 0;
            position: absolute;
            width: 0;
            height: 0;
            box-shadow: -1px -1px 12px #e0e0e0;
            transition-duration: 0.3s;
            transition-property: width, height;
        }
        #books li:nth-child(odd)::after {
            right: 0;
            background: linear-gradient(-45deg, transparent 50%, #eee 50%, #fff 90%);
        }
        #books li:nth-child(even)::after {
            left: 0;
            background: linear-gradient(45deg, transparent 50%, #eee 50%, #fff 90%);
        }
        #books li:hover::after {
            width: 30px;
            height: 30px;
        }
    </style>
    <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript”>
        $(function () {
            var page = $(“#books li”).length;
            $(“#books li”).each(function (index, item) {
                $(this).css(“z-index”, page – index);
            });
            $(“#books li:even”).click(function (e) {
                $(this).add($(this).next()).addClass(“rl”);
                var obj = this;
                setTimeout(function () {
                    $(obj).add($(obj).next()).css(“z-index”, “auto”);
                }, 500)
            })
            $(“#books li:odd”).click(function (e) {
                $(this).prev().css(“z-index”, page – $(this).index() + 1);
                $(this).css(“z-index”, page – $(this).index());
                $(this).add($(this).prev()).removeClass(“rl”);
            })
        })
    </script>
</head>
<body>
    <ul id=”books”>
        <li>
            <p style=”font-size: 300px; text-align: center;”>1</p>
        </li>
        <li>
            <p style=”font-size: 300px; text-align: center;”>2</p>
        </li>
        <li>
            <p style=”font-size: 300px; text-align: center;”>3</p>
        </li>
        <li>
            <p style=”font-size: 300px; text-align: center;”>4</p>
        </li>
        <li>
            <p style=”font-size: 300px; text-align: center;”>5</p>
        </li>
        <li>
            <p style=”font-size: 300px; text-align: center;”>6</p>
        </li>
        <li>
            <p style=”font-size: 300px; text-align: center;”>7</p>
        </li>
        <li>
            <p style=”font-size: 300px; text-align: center;”>8</p>
        </li>
        <li>
            <p style=”font-size: 300px; text-align: center;”>9</p>
        </li>
        <li>
            <p style=”font-size: 300px; text-align: center;”>10</p>
        </li>
        <li>
            <p style=”font-size: 300px; text-align: center;”>11</p>
        </li>
        <li>
            <p style=”font-size: 300px; text-align: center;”>12</p>
        </li>
    </ul>
</body>
</html>

前端开发用什麼ide|html5前端开发公开课|前端开发学ios有优势

» 本文来自:前端开发者 » 《CSS3 transition 制作 简单的翻书效果。》
» 本文链接地址:https://www.rokub.com/4864.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!