H5旋转切换动画效果代码。

最新推荐文章于 2024-06-26 20:04:17 发布

#麻辣小龙虾#

最新推荐文章于 2024-06-26 20:04:17 发布

阅读量4.5k

点赞数

分类专栏： HTML5 CSS3

本文链接：https://blog.csdn.net/CodingNoob/article/details/79770487

版权

HTML5 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

CSS3

20 篇文章 0 订阅

订阅专栏

闲来没事，敲敲代码也不错，，，，，，

动画效果如下：

这里写图片描述

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../Util/jquery-3.3.1.min.js"></script>
    <title>H5切换动画效果</title>
    <style>
        *{margin:0;padding:0}
        .clear::after{content:"";display:block;clear:both;}
        .banner{width:400px;margin:40px auto;}
        .banner .box{margin:auto;width:420px;overflow: hidden;}
        .banner .box ul{position:relative;width:1000px;padding:30px 0;}
        .banner .box .active{transform:scale(1.5) rotate(360deg);transition: all 0.5s ease-in-out;/*关键样式代码，动画样式切换效果*/}
        .banner .box ul li{float:left;height:100px;width:100px;margin:0 20px;font-size:46px;color:#fff;line-height:100px;text-align:center;list-style:none;transition: all 0.5s ease-in-out;/*关键样式代码，动画样式切换效果，如果不加，下一个会有动画过度，当前则没有动画过度*/}

        .scroll{height:200px;width:200px;margin:auto;}
        .scroll .box{width:200px;height:200px;overflow: hidden;}
        .scroll .box ul{width:400px;height:400px;transform: rotate(0deg);}
        .scroll .box ul li{float:left;height:200px;width:200px;font-size:46px;color:#fff;line-height:200px;text-align:center;list-style: none;}
        .scroll .box ul li:nth-of-type(2){transform:rotate(90deg);}
        .scroll .box ul li:nth-of-type(3){transform:rotate(270deg);}
        .scroll .box ul li:nth-of-type(4){transform:rotate(180deg);}

    </style>
</head>
<body>
    <h2 style="text-align:center;margin-bottom:10px;">动画效果一</h2>
    <div class="banner">
        <div class="box">
            <ul class="clear">
                <li style="background:lawngreen">1</li>
                <li style="background:red" class="active">2</li>
                <li style="background:blue">3</li>
                <li style="background:yellow">4</li>
                <li style="background:pink">5</li>
                <li style="background:orange">6</li>
            </ul>
        </div>
    </div>
    <h2 style="text-align:center;margin-bottom:10px;">动画效果二</h2>
    <div class="scroll">
        <div class="box">
            <ul class="clear">
                <li style="background:indigo">1</li>
                <li style="background:pink">2</li>
                <li style="background:orange">4</li>
                <li style="background:green">3</li>
            </ul>
        </div>
    </div>
</body>
</html>
<script>
    (function(select){
        var outBox = $(select);
        var box = outBox.find(".box");
        var ul = outBox.find("ul");
        var li = outBox.find("li");
        var num = li.length;
        var width = li.width() + 40;
        ul.find("li.active").animate({"scale" : "0"},1000)
        console.log(outBox);
        var start = 0;
        setInterval(function(){
            ul.animate({"left": "-=" + width + "px"},1000,function(){
                $(this).append($(this).find("li").eq(0)).css({"left": "0px"});
            })
            ul.find("li.active").removeClass("active").next().addClass("active");

        },2000);

    })(".banner");

    (function(select){
        var outBox = $(select);
        var ul = outBox.find("ul");
        var start = 1;

        function rotate(elem, step, time ,deg){
            var olddeg = ul.get(0).style.webkitTransform ? parseInt(ul.get(0).style.webkitTransform.replace("rotate(-","")) : 0;
            setInterval(function(){
                //console.log(olddeg)
                if(step <= deg){
                    var rotatedeg = olddeg + step;
                    elem.style.webkitTransform = "rotate(-" +  rotatedeg + "deg" + ")";
                    step++;
                }
            },time);
        }


        setInterval(function(){
            rotate(ul.get(0), 1, 10,90);
        },2000);
    })(".scroll");

</script>