醉美水芙蓉 发表于 5 天前

【漫步特效】不负莫离

<style>
#mydiv {
    margin: 160px 0 30px calc(50% - 931px);
    display: grid;
    place-items: center;
    width: 1700px;
    height: 850px;
    background: lightblue url('https://644220.freep.cn/644220/5/s11.jpg') no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    user-select: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
#vid {
    position: absolute;
    width: 130%;
    height: 130%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    mask: linear-gradient(to top right, red 88%, transparent 0);
    -webkit-mask: linear-gradient(to top right, red 88%, transparent 0);
    z-index: 3;
    opacity: .35;
}
#slideWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 1700px;
    height: 850px;
    z-index: 0;
}
.slideItem {
    position: absolute;
    top: 0;
    left: 0;
    width: 1700px;
    height: 850px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: translateZ(0);
    will-change: transform, opacity;
}
</style>

<div id="mydiv">
    <div id="slideWrap">
      <div class="slideItem"></div>
      <div class="slideItem"></div>
      <div class="slideItem"></div>
      <div class="slideItem"></div>
      <div class="slideItem"></div>
      <div class="slideItem"></div>
      <div class="slideItem"></div>
    </div>
    <video id="vid" src="https://img2.tukuppt.com/video_show/7165162/00/19/30/5f043f5f18e7b.mp4" autoplay loop muted=""></video>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=3381905550" autoplay loop></audio>
</div>

<script>
var imgList = [
    "https://644220.freep.cn/644220/5/s11.jpg",
    "https://644220.freep.cn/644220/5/s22.jpg",
    "https://644220.freep.cn/644220/5/s33.jpg",
    "https://644220.freep.cn/644220/5/s44.jpg",
    "https://644220.freep.cn/644220/5/s55.jpg",
    "https://644220.freep.cn/644220/5/s66.jpg",
    "https://644220.freep.cn/644220/5/s77.jpg"
];

var animList = [
    "rotateIn",         
    "zoomInHuge",      
    "zoomOutHuge",      
    "slideFromFarRight",
    "slideFromFarLeft",   
    "slideFromFarBottom",
    "slideFromFarTop",   
    "rotateZoomWild",   
    "prevVanishScale",   
    "prevExplodeScale",   
    "swingFromRight",   
    "swingFromLeft",      
    "pushHardLeft",      
    "pushHardDown"      
];

var wrap = document.getElementById("slideWrap");
var items = wrap.querySelectorAll(".slideItem");

for (var i = 0; i < items.length; i++) {
    items.style.backgroundImage = "url(" + imgList + ")";
}

var curIndex = 0;
var animIndex = 0;
var showTime = 4600;
var transTime = 1300;
var isRunning = false;
var easing = "cubic-bezier(0.22, 0, 0.36, 1)";


items.style.opacity = 0;
items.style.transform = "rotate(315deg) scale(0.35) translateZ(0)";

function resetTwo(elPrev, elNext) {
    elPrev.style.transition = "none";
    elNext.style.transition = "none";
    elNext.style.opacity = 0;
    elNext.style.transform = "translateZ(0)";
}

function runTransition() {
    if (isRunning) return;
    isRunning = true;

    var prev = items;
    var nextIndex = (curIndex + 1) % items.length;
    var next = items;
    var anim = animList;
    animIndex++;

    resetTwo(prev, next);
    prev.style.opacity = 1;

    switch (anim) {
      case "rotateIn":
            next.style.opacity = 0;
            next.style.transform = "rotate(315deg) scale(0.35) translateZ(0)";
            next.style.transition = "opacity " + transTime + "ms " + easing + ", transform " + transTime + "ms " + easing;
            setTimeout(function () {
                next.style.opacity = 1;
                next.style.transform = "rotate(0deg) scale(1) translateZ(0)";
            }, 120);
            setTimeout(function () {
                prev.style.opacity = 0;
                finish(nextIndex);
            }, transTime);
            break;

      case "zoomInHuge":
            next.style.opacity = 0;
            next.style.transform = "scale(0.05) translateZ(0)";
            next.style.transition = "opacity " + transTime + "ms " + easing + ", transform " + transTime + "ms " + easing;
            setTimeout(function () {
                next.style.opacity = 1;
                next.style.transform = "scale(1) translateZ(0)";
            }, 120);
            setTimeout(function () {
                prev.style.opacity = 0;
                finish(nextIndex);
            }, transTime);
            break;

      case "zoomOutHuge":
            next.style.opacity = 0;
            next.style.transform = "scale(3.2) translateZ(0)";
            next.style.transition = "opacity " + transTime + "ms " + easing + ", transform " + transTime + "ms " + easing;
            setTimeout(function () {
                next.style.opacity = 1;
                next.style.transform = "scale(1) translateZ(0)";
            }, 120);
            setTimeout(function () {
                prev.style.opacity = 0;
                finish(nextIndex);
            }, transTime);
            break;

      case "slideFromFarRight":
            next.style.opacity = 1;
            next.style.transform = "translateX(260%) translateZ(0)";
            next.style.transition = "transform " + transTime + "ms " + easing;
            setTimeout(function () {
                next.style.transform = "translateX(0) translateZ(0)";
            }, 120);
            setTimeout(function () {
                prev.style.opacity = 0;
                finish(nextIndex);
            }, transTime);
            break;

      case "slideFromFarLeft":
            next.style.opacity = 1;
            next.style.transform = "translateX(-260%) translateZ(0)";
            next.style.transition = "transform " + transTime + "ms " + easing;
            setTimeout(function () {
                next.style.transform = "translateX(0) translateZ(0)";
            }, 120);
            setTimeout(function () {
                prev.style.opacity = 0;
                finish(nextIndex);
            }, transTime);
            break;

      case "slideFromFarBottom":
            next.style.opacity = 1;
            next.style.transform = "translateY(260%) translateZ(0)";
            next.style.transition = "transform " + transTime + "ms " + easing;
            setTimeout(function () {
                next.style.transform = "translateY(0) translateZ(0)";
            }, 120);
            setTimeout(function () {
                prev.style.opacity = 0;
                finish(nextIndex);
            }, transTime);
            break;

      case "slideFromFarTop":
            next.style.opacity = 1;
            next.style.transform = "translateY(-260%) translateZ(0)";
            next.style.transition = "transform " + transTime + "ms " + easing;
            setTimeout(function () {
                next.style.transform = "translateY(0) translateZ(0)";
            }, 120);
            setTimeout(function () {
                prev.style.opacity = 0;
                finish(nextIndex);
            }, transTime);
            break;

      case "rotateZoomWild":
            next.style.opacity = 0;
            next.style.transform = "rotate(32deg) scale(0.12) translateZ(0)";
            next.style.transition = "opacity " + transTime + "ms " + easing + ", transform " + transTime + "ms " + easing;
            setTimeout(function () {
                next.style.opacity = 1;
                next.style.transform = "rotate(0deg) scale(1) translateZ(0)";
            }, 120);
            setTimeout(function () {
                prev.style.opacity = 0;
                finish(nextIndex);
            }, transTime);
            break;

      case "prevVanishScale":
            prev.style.transition = "opacity " + transTime + "ms ease-in, transform " + transTime + "ms ease-in";
            prev.style.transform = "scale(1) translateZ(0)";
            next.style.opacity = 1;
            setTimeout(function () {
                prev.style.opacity = 0;
                prev.style.transform = "scale(0.08) translateZ(0)";
            }, 120);
            setTimeout(function () {
                finish(nextIndex);
            }, transTime);
            break;

      case "prevExplodeScale":
            prev.style.transition = "opacity " + transTime + "ms ease-in, transform " + transTime + "ms ease-in";
            prev.style.transform = "scale(1) translateZ(0)";
            next.style.opacity = 1;
            setTimeout(function () {
                prev.style.opacity = 0;
                prev.style.transform = "scale(3.5) translateZ(0)";
            }, 120);
            setTimeout(function () {
                finish(nextIndex);
            }, transTime);
            break;

      case "swingFromRight":
            next.style.opacity = 0;
            next.style.transform = "rotate(28deg) translateX(240%) translateZ(0)";
            next.style.transition = "opacity " + transTime + "ms " + easing + ", transform " + transTime + "ms " + easing;
            setTimeout(function () {
                next.style.opacity = 1;
                next.style.transform = "rotate(0deg) translateX(0) translateZ(0)";
            }, 120);
            setTimeout(function () {
                prev.style.opacity = 0;
                finish(nextIndex);
            }, transTime);
            break;

      case "swingFromLeft":
            next.style.opacity = 0;
            next.style.transform = "rotate(-28deg) translateX(-240%) translateZ(0)";
            next.style.transition = "opacity " + transTime + "ms " + easing + ", transform " + transTime + "ms " + easing;
            setTimeout(function () {
                next.style.opacity = 1;
                next.style.transform = "rotate(0deg) translateX(0) translateZ(0)";
            }, 120);
            setTimeout(function () {
                prev.style.opacity = 0;
                finish(nextIndex);
            }, transTime);
            break;

      case "pushHardLeft":
            next.style.opacity = 1;
            next.style.transform = "translateX(-220%) translateZ(0)";
            next.style.transition = "transform " + transTime + "ms " + easing;
            prev.style.transition = "transform " + transTime + "ms ease-in";
            setTimeout(function () {
                next.style.transform = "translateX(0) translateZ(0)";
                prev.style.transform = "translateX(220%) translateZ(0)";
            }, 120);
            setTimeout(function () {
                prev.style.opacity = 0;
                finish(nextIndex);
            }, transTime);
            break;

      case "pushHardDown":
            next.style.opacity = 1;
            next.style.transform = "translateY(220%) translateZ(0)";
            next.style.transition = "transform " + transTime + "ms " + easing;
            prev.style.transition = "transform " + transTime + "ms ease-in";
            setTimeout(function () {
                next.style.transform = "translateY(0) translateZ(0)";
                prev.style.transform = "translateY(-220%) translateZ(0)";
            }, 120);
            setTimeout(function () {
                prev.style.opacity = 0;
                finish(nextIndex);
            }, transTime);
            break;
    }

    function finish(newIdx) {
      curIndex = newIdx;
      isRunning = false;
    }
}

setTimeout(function () {
    var first = items;
    first.style.transition = "opacity " + transTime + "ms " + easing + ", transform " + transTime + "ms " + easing;
    first.style.opacity = 1;
    first.style.transform = "rotate(0deg) scale(1) translateZ(0)";

    setTimeout(function () {
      setInterval(runTransition, showTime);
    }, transTime + 800);
}, 500);
</script>

klxf 发表于 4 天前

好听好看，谢谢分享

醉美水芙蓉 发表于 3 天前

klxf 发表于 2026-9-12 10:58
好听好看，谢谢分享

谢谢友友支持！
页: [1]
查看完整版本: 【漫步特效】不负莫离