js缓冲动画

最新推荐文章于 2024-07-18 19:32:09 发布

风雨等归期

最新推荐文章于 2024-07-18 19:32:09 发布

阅读量237

点赞数

分类专栏： js基础

本文链接：https://blog.csdn.net/liangmaxmin/article/details/107587230

版权

js基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

六界美人图谱

运行

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓冲动画</title>
</head>
<style>

    .content {
        position: relative;
        top: 100px;
        left: 0;
        height: 300px;
        width: 940px;
        margin: 0 50px;
    }

    section {
        position: absolute;
        top: -8px;
        left: 85px;
        perspective: 1000px;
    }

    .box {
        position: relative;
        transform-style: preserve-3d;
        width: 30px;
        height: 300px;
        animation: move 4.5s cubic-bezier(.31, .92, .64, .88) infinite;
        animation-play-state: paused;
    }

    .box > div {
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 300px;
        background-color: #CCCCFF;
    }

    div:nth-child(1) {
        transform: rotateY(0) translateZ(60px);
        font-size: 16px;
        text-align: center;
        box-sizing: border-box;
        padding-top: 50px;
        font-style: italic;
    }

    div:nth-child(2) {
        transform: rotateY(60deg) translateZ(60px);
    }

    div:nth-child(3) {
        transform: rotateY(120deg) translateZ(60px);
    }

    div:nth-child(4) {
        transform: rotateY(180deg) translateZ(60px);
    }

    div:nth-child(5) {
        transform: rotateY(240deg) translateZ(60px);
    }

    div:nth-child(6) {
        transform: rotateY(300deg) translateZ(60px);
    }

    @keyframes move {
        0% {
            transform: rotateY(0);
        }
        100% {
            transform: rotateY(360deg);
        }
    }

    .img {
        position: absolute;
        top: 0;
        left: 0;
        height: 300px;
        overflow: hidden;
    }

    .img ul {
        list-style: none;
        margin: 0px;
        margin-top: -50px;
        width: 0px;
    }

    .img ul li {
        float: left;
        margin-right: 20px;
        width: 200px;
        height: 300px;
    }

    .img li:nth-child(1){
        background: url("img/9.jpg") no-repeat ;
        background-size: 100% 100%;
    }
    .img li:nth-child(2){
        background: url("img/6.jpg") no-repeat ;
        background-size: 100% 100%;
    }
    .img li:nth-child(3){
        background: url("img/3.jpg") no-repeat ;
        background-size: 100% 100%;
    }
    .img li:nth-child(4){
        background: url("img/4.jpg") no-repeat ;
        background-size: 100% 100%;
    }


</style>


<body>

<div class="content">
    <div class="img">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <section>
        <div class="box">
            <div>六界美人图谱</div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </section>

</div>

</body>

<script>

    function animate(obj, target, callback) {

        obj.timer = setInterval(function () {

            var offset = obj.offsetLeft;
            var step = Math.ceil((target - offset) / 40);
            ul.style.width=offset+'px';
            if (offset === target) {
                clearInterval(obj.timer);
                if (callback) {
                    callback();
                }
            }
            obj.style.left = offset + step + 'px';

        }, 30);
    }

    var section = document.querySelector('section');
    var box = document.querySelector('.box');
    var ul = document.querySelector('ul');

    section.addEventListener('click', function () {
        box.style.animationPlayState = 'running';
        animate(section, 940, function () {
            box.style.animationPlayState = 'paused';
        });
    })


</script>

</html>