H5动画墙制作 Web前端开发

h5页面前端开发|怎么做前端app开发|开发app注重前端吗?

html 代码

<!DOCTYPE html>
<html lang=”zh”>
<head>
    <meta charset=”UTF-8″>
    <title>web前端开发实战书籍:动画墙</title>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <style>
        body {
            font-family: Arial, “Microsoft YaHei UI Light”;
        }
        /*一、24格处理*/
        #iconWall {
            width: 732px;
            background-color: #f0f0f0;
            margin: 0 auto;
            overflow: hidden;
            padding-top: 1px;
            padding-left: 1px;
            list-style: none;
        }
        #iconWall li {
            width: 121px;
            height: 108px;
            /*background-color: #fff;*/
            float: left;
            margin-right: 1px;
            margin-bottom: 1px;
            position: relative;
        }
        /*二、3D反转区域处理 */
        .img-back,
        .img-front {
            position: absolute;
            left: 0;
            top: 0;
            background-color: #fff;
            width: 121px;
            height: 108px;
            text-align: center;
            line-height: 108px;
        }
        li img {
            vertical-align: middle;
        }
        .img-3d {
            transform-style: preserve-3d;
        }
        .img-back {
            transform: rotateY(180deg);
        }
        /*测试代码*/
        /*li:hover .img-3d{*/
        /*transition: .3s linear;*/
        /*transform: rotateY(180deg);*/
        /*}*/
        /*三、换一批*/
        #btnRefresh {
            text-align: center;
            transition: .3s linear;
            background-color: #fff;
        }
        .iconRefresh {
            width: 28px;
            height: 28px;
            background: url(“../img/refresh.png”);
            margin: 32px auto 0;
        }
        #btnRefresh:hover {
            color: #fff;
            background-color: #dd2727;
            transition: 0s;
        }
        #btnRefresh:hover .iconRefresh {
            background: url(“../img/refresh-white.png”);
        }
        /*四、处理浮层*/
        .mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 121px;
            height: 108px;
            background-color: rgba(0, 0, 0, .7);
            opacity: 0;
        }
        .mask img {
            float: right;
            margin-top: 8px;
            margin-right: 8px;
        }
        .mask p {
            font-size: 12px;
            color: #fff;
            margin-top: 45px;
            text-align: center;
        }
        .mask a {
            color: #fff;
            text-decoration: none;
            font-size: 12px;
            background-color: red;
            width: 70px;
            display: block;
            margin: 0 auto;
            text-align: center;
            height: 18px;
            line-height: 18px;
            border-radius: 9px;
        }
        li:hover .mask {
            opacity: 1;
            transition: .3s linear;
        }
        /*页脚*/
        footer {
            text-align: center;
            margin-top: 20px;
            color: #666;
            font-size: 16px;
            line-height: 1.4;
        }
    </style>
</head>
<body>
    <div class=”htmleaf-container”>
        <div class=”htmleaf-content”>
            <ul id=”iconWall”>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon1.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon11.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon2.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon12.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon3.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon13.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon4.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon14.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon5.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon15.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon6.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon16.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon7.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon17.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon8.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon18.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon9.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon19.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon10.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon20.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon21.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon31.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon22.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon32.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon23.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon33.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon24.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon34.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon25.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon35.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon26.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon36.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon27.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon37.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon28.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon38.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon29.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon39.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon30.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon41.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon42.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon43.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon44.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon45.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li>
                    <div class=”img-3d”>
                        <div class=”img-back”>
                            <img src=”img/icon22.jpg” alt=””>
                        </div>
                        <div class=”img-front”>
                            <img src=”img/icon13.jpg” alt=””>
                        </div>
                    </div>
                    <div class=”mask”>
                        <img src=”img/heart.png” alt=””>
                        <p>关注人数 323.4万</p>
                        <a href=”javascript:”>点击进入</a>
                    </div>
                </li>
                <li id=”btnRefresh”>
                    <div class=”iconRefresh”></div>
                    <span>换一批</span>
                </li>
            </ul>
        </div>
    </div>
    <script type=”text/javascript”>
        window.onload = function () {
            var clickTimes = 1;
            //总列数
            var lineCount = 6;
            var btnRefresh = document.querySelector(“#btnRefresh”);
            var iconRefresh = document.querySelector(“.iconRefresh”)
            var img3DList = document.querySelectorAll(“.img-3d”);
            var len = img3DList.length;
            btnRefresh.onclick = function () {
                iconRefresh.style.transition = “.3s linear”;
                iconRefresh.style.transform = “rotate(” + 360 * clickTimes + “deg)”;
                for (var i = 0; i < len; i++) {
                    var colNum = parseInt(i / lineCount);
                    var rowNum = i % lineCount;
                    var delayTime = (colNum + rowNum) * 100;
                    img3DList[i].style.transition = “.3s ” + delayTime + “ms linear”;
                    img3DList[i].style.transform = “rotateY(” + 180 * clickTimes + “deg)”;
                }
                clickTimes++;
            }
        }
    </script>
</body>
</html>

学习前端开发入门书籍|前端开发干什么?|app前端开发怎么写?

» 本文来自:前端开发者 » 《H5动画墙制作 Web前端开发》
» 本文链接地址:https://www.rokub.com/4203.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!