CSS 动画

来源：互联网发布：爱玩游戏的女生知乎编辑：程序博客网时间：2024/05/19 09:37

酷炫动画（CSS3）

要实现本动画需要一定的智商，请智商不够的同学自行离开。

1.设定初始化
2.展开事件
3.收起事

原理

1.初始化事件
需要往页面ul中插入25个li并

            function initial() {                var row = 5;//行                var collums = 5;//列                var w = $("#imageslist").width() / row //算出每个LI所需要的宽度                var h = $("#imageslist").height() / collums;//算出每个LI所需要的长度                for (var r = 0; r < row; r++) {//这里运用了二次循环，先循环行，再循环列，                    for (var c = 0; c < collums; c++) {                        var rr = r * 30 - 60;                        var d = c * 30 - 60;                        $("<li><div class='item'></div></li>")//这里运用appento往UL里面添加25个lI                                .css({"transform": "rotate(" + 10 + "deg) scale(1) translate(" + d + "px, " + rr + "px)"})                                .find("div")//找到里面的DIV对象变成DIV也就是ITEM并给它设置css样式 注意的是图片的名称要与相对应的变量值进行等价联系否则不能实现                                //（r*collums+c）相当于从0开始走到24也就是所有图片一一对应上去了                                .css({                                    "background-image": "url(images/" + (r * collums + c) + ".jpg)",                                    "background-size": "cover"                                })                                .end()//用end结束对象变回LI 给lI设置CSS使之定位一块块连接而成                                 .css({                                    "left": w * c + "px",                                    "top": h * r + "px"                                })                                .appendTo("#imageslist")                    }                }            };

2.收起事件

               //使得成为一张大图            function open(index) {                $("#imageslist").find("li").each(function (i) {//找到LI并给LI设置相应要变化的CSS值 使之复原                    $(this).css({"transform": "rotate(0)"})                })                $(".item").finish().css(//对放背景图片的DIV本身进行图片的改变 并且改变background-size 从覆盖整个DIV改成COVER从而实现每个DIV有当前点击图片的一部分 并进行背景图片位置的改变 也就是精灵技术从而实现整张大图呈现的效果.                    "background-image": "url(images/" + index + ".jpg)",                    "background-size": "auto",                    "transform": "scale(1)"                });                $("#imageslist li").find("div").each(function (i, element) {                    var l = 25 * parseInt(i / 5);                    var t = 25 * (i % 5);                    $(element).css({"background-position": t + "%" + l + "%"})                });            };

3.展开事件

 function close() {                $("#imageslist").find("li").each(function (i) {                    var X = parseInt(i / 5) * 30 - 60;                    var Y = (i % 5) * 30 - 60;                    $(this).css({"transform": "rotate(" + 10 + "deg) scale(1) translate(" + Y + "px, " + X + "px)"})                }).find(".item")                        .finish()                        .css({"transform": "scale(1)"})                        .each(function (i, element) {                            $(element).css({                                "background-image": "url('images/" + i + ".jpg')",                                "background-size": "cover"                            })                                    .end()                        })            };

代码块

<!DOCTYPE html><html lang="en"><head>    <style>        * {            margin: 0;            padding: 0        }        ul {            list-style: none        }        #imageslist {            width: 980px;            height: 500px;            margin: 100px auto;            top: 0;            left: 0;            bottom: 0;            right: 0;            position: relative;        }        #imageslist li {            position: absolute;            top: 0;            left: 0;            width: 196px;            height: 100px;            transition: all 1s;            background-color: #fff        }        .item {            width: 100%;            height: 100%;            background: url("images/0.jpg");            background-size: cover;            transition: all 1s        }    </style>    <meta charset="UTF-8">    <title>Title</title>    <script src="js/jquery-3.1.0.min.js"></script>    <script>        $(function () {            // 三个事情            var toggle = true            //1.初始化 加入25个li            initial();            //2.展开            close();            var timer = null;            $("#imageslist").on("click", "li", function () {                /*clearTimeout(timer);*/                if (toggle) {                    clearTimeout(timer)                    var index = $(this).index();                    open(index);                    toggle = false;                } else {                    timer = setTimeout(function () {                        $("#imageslist").html("");                        initial();                        console.log(1)                    }, 1000)                    close();                    toggle = true;                }            })            //3.收起            function initial() {                var row = 5;                var collums = 5;                var w = $("#imageslist").width() / row;                var h = $("#imageslist").height() / collums;                for (var r = 0; r < row; r++) {                    for (var c = 0; c < collums; c++) {                        var rr = r * 30 - 60;                        var d = c * 30 - 60;                        $("<li><div class='item'></div></li>")                                .css({"transform": "rotate(" + 10 + "deg) scale(1) translate(" + d + "px, " + rr + "px)"})                                .find("div")                                .css({                                    "background-image": "url(images/" + (r * collums + c) + ".jpg)",                                    "background-size": "cover"                                })                                .end()                                .css({                                    "left": w * c + "px",                                    "top": h * r + "px"                                })                                .appendTo("#imageslist")                    }                }            };            function open(index) {                $("#imageslist").find("li").each(function (i) {                    var r = parseInt(i / 5) * 30 - 60;                    var c = (i % 5) * 30 - 60;                    $(this).css({"transform": "rotate(0) translate(" + r + "," + c + ")"})                }).css({"transform": "rotate(0)"});                $(".item").finish().css({                    "background-image": "url(images/" + index + ".jpg)",                    "background-size": "auto",                    "transform": "scale(1)"                });                $("#imageslist li").find("div").each(function (i, element) {                    var l = 25 * parseInt(i / 5);                    var t = 25 * (i % 5);                    $(element).css({"background-position": t + "%" + l + "%"})                });            };            function close() {                $("#imageslist").find("li").each(function (i) {                    var r = parseInt(i / 5) * 30 - 60;                    var c = (i % 5) * 30 - 60;                    $(this).css({"transform": "rotate(" + 10 + "deg) scale(1) translate(" + c + "px, " + r + "px)"})                }).find(".item")                        .finish()                        .css({"transform": "scale(1)"})                        .each(function (i, element) {                            $(element).css({                                "background-image": "url('images/" + i + ".jpg')",                                "background-size": "cover"                            })                                    .end()                        })            };        })    </script></head><body style="background-color: rgba(0, 0, 0, 1)"><ul id="imageslist">    <!--<li>        <div class="item">        </div>    </li>--></ul></body></html>

0 0