醉美水芙蓉 发表于 2025-11-18 22:02:55

【漫步特效】请不要在秋天里失恋

<style>
      #mydiv {
            margin: 130px 0 30px calc(50% - 850px);
            display: grid;
            place-items: center;
            width: 1700px;
            height: 850px;
            background: lightblue url('https://kkshan.com/data/attachment/forum/202511/19/184736rc3vxv3zeo4ciwce.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);
            z-index: 6;
            opacity: .45;
            animation: videoPulse 8s infinite alternate;
      }
      
      .slide-base {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            animation-duration: 80s;
            animation-iteration-count: infinite;
            transform-origin: center center;
      }
      
      .slide-fade { z-index: 2; animation-name: slideFade; }
      .slide-skew { z-index: 3; }
      .slide-rotate, .slide-push, .slide-fade-rotate, .slide-fold, .slide-shutter { z-index: 4; }
      .slide-zoom-fade, .slide-flip, .slide-slide-up, .slide-pixelate, .slide-color-fade, .slide-radial { z-index: 5; }
      
      .slide-fold { transform-origin: top center; }
      .slide-color-fade { filter: grayscale(100%); }
      .slide-radial { clip-path: circle(0% at center); }
      
      @keyframes slideFade {
            0%, 100% { opacity: 0; transform: scale(1.1); }
            2.67%, 5.33% { opacity: 1; transform: scale(1); }
            8% { opacity: 0; transform: scale(0.9); }
      }
      
      @keyframes skew1 {
            8%, 100% { opacity: 0; transform: skewX(-12deg) scale(1.2); }
            10.67%, 13.33% { opacity: 1; transform: skewX(0) scale(1); }
            16% { opacity: 0; transform: skewX(12deg) scale(0.8); }
      }
      
      @keyframes skew2 {
            16.5%, 100% { opacity: 0; transform: skewY(-8deg) scale(1.15); }
            19.17%, 21.83% { opacity: 1; transform: skewY(0) scale(1); }
            24.5% { opacity: 0; transform: skewY(8deg) scale(0.85); }
      }
      
      @keyframes skew3 {
            25%, 100% { opacity: 0; transform: skew(-6deg, 6deg) scale(1.2); }
            27.67%, 30.33% { opacity: 1; transform: skew(0, 0) scale(1); }
            33% { opacity: 0; transform: skew(6deg, -6deg) scale(0.8); }
      }
      
      @keyframes skew4 {
            33.5%, 100% { opacity: 0; transform: skew(10deg, -10deg) scale(1.15); }
            36.17%, 38.83% { opacity: 1; transform: skew(0, 0) scale(1); }
            41.5% { opacity: 0; transform: skew(-10deg, 10deg) scale(0.85); }
      }
      
      @keyframes skew5 {
            42%, 100% { opacity: 0; transform: skewY(12deg) scale(1.2); }
            44.67%, 47.33% { opacity: 1; transform: skewY(0) scale(1); }
            50% { opacity: 0; transform: skewY(-12deg) scale(0.8); }
      }
      
      @keyframes rotateScale {
            50.5%, 100% { opacity: 0; transform: rotate(-15deg) scale(0.8); }
            53.17%, 55.83% { opacity: 1; transform: rotate(0) scale(1); }
            58.5% { opacity: 0; transform: rotate(15deg) scale(0.8); }
      }
      
      @keyframes pushIn {
            59%, 100% { opacity: 0; transform: translateX(-100%); }
            61.67%, 64.33% { opacity: 1; transform: translateX(0); }
            67% { opacity: 0; transform: translateX(100%); }
      }
      
      @keyframes fadeRotate {
            67.5%, 100% { opacity: 0; transform: rotate(0deg) scale(1.1); }
            70.17%, 72.83% { opacity: 1; transform: rotate(10deg) scale(1); }
            75.5% { opacity: 0; transform: rotate(20deg) scale(0.9); }
      }
      
      @keyframes foldOpen {
            76%, 100% { opacity: 0; transform: scaleY(0.1); }
            78.67%, 81.33% { opacity: 1; transform: scaleY(1); }
            84% { opacity: 0; transform: scaleY(0.1); }
      }
      
      @keyframes shutterOpen {
            84.5%, 100% { opacity: 1; clip-path: inset(0 100% 0 0); }
            87.17%, 89.83% { clip-path: inset(0 0 0 0); }
            92.5% { opacity: 1; clip-path: inset(0 0 0 100%); }
      }
      
      @keyframes zoomFade {
            2%, 100% { opacity: 0; transform: scale(0.3); }
            4.67%, 7.33% { opacity: 1; transform: scale(1); }
            10% { opacity: 0; transform: scale(1.5); }
      }
      
      @keyframes flip {
            10.5%, 100% { opacity: 0; transform: rotateY(180deg) scale(0.8); }
            13.17%, 15.83% { opacity: 1; transform: rotateY(0deg) scale(1); }
            18.5% { opacity: 0; transform: rotateY(-180deg) scale(0.8); }
      }
      
      @keyframes slideUp {
            19%, 100% { opacity: 0; transform: translateY(100%); }
            21.67%, 24.33% { opacity: 1; transform: translateY(0); }
            27% { opacity: 0; transform: translateY(-100%); }
      }
      
      @keyframes pixelate {
            27.5%, 100% { opacity: 0; filter: blur(20px) contrast(0); }
            30.17%, 32.83% { opacity: 1; filter: blur(0) contrast(1); }
            35.5% { opacity: 0; filter: blur(20px) contrast(0); }
      }
      
      @keyframes colorFade {
            36%, 100% { opacity: 0; filter: grayscale(100%) brightness(0.5); }
            38.67%, 41.33% { opacity: 1; filter: grayscale(0%) brightness(1); }
            44% { opacity: 0; filter: grayscale(100%) brightness(0.5); }
      }
      
      @keyframes radialExpand {
            44.5%, 100% { opacity: 1; clip-path: circle(0% at center); }
            47.17%, 49.83% { clip-path: circle(50% at center); }
            52.5% { opacity: 1; clip-path: circle(100% at center); }
            55% { opacity: 0; clip-path: circle(150% at center); }
      }
      
      @keyframes videoPulse {
            0% { opacity: 0.4; transform: scale(1.02); }
            100% { opacity: 0.5; transform: scale(1); }
      }
      
      .eagle-js {
            position: absolute;
            width: 100px;
            height: auto;
            z-index: 10;
            transition: opacity 1.5s ease;
      }
      
      #overlay-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 100;
            pointer-events: none;
      }
    </style>
</head>
<body>
    <div id="mydiv">
      <img id="overlay-img" src="https://kkshan.com/data/attachment/forum/202511/19/184736rj3360jpyx225zbp.png" alt="Overlay">
      <img class="eagle-js" id="eagle1" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/ee(1).gif" alt="Eagle 1">
      <img class="eagle-js" id="eagle2" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/ee(1).gif" alt="Eagle 2">
      
      <!-- Slides with animations -->
      <div class="slide-fade slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184736rc3vxv3zeo4ciwce.jpg'); animation-delay: 0s;"></div>
      <div class="slide-fade slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184736g544kzc545vpphk4.jpg'); animation-delay: 4s;"></div>
      <div class="slide-fade slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184737yfsdjywk8kt6l6y5.jpg'); animation-delay: 8s;"></div>
      <div class="slide-fade slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184737c5ug8dve8uollf2d.jpg'); animation-delay: 12s;"></div>
      <div class="slide-fade slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184737vlurr2lnnj3xruxl.jpg'); animation-delay: 16s;"></div>
      
      <div class="slide-skew slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184736rc3vxv3zeo4ciwce.jpg'); animation-name: skew1; animation-delay: 20s;"></div>
      <div class="slide-skew slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184736g544kzc545vpphk4.jpg'); animation-name: skew2; animation-delay: 24s;"></div>
      <div class="slide-skew slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184737yfsdjywk8kt6l6y5.jpg'); animation-name: skew3; animation-delay: 28s;"></div>
      <div class="slide-skew slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184737c5ug8dve8uollf2d.jpg'); animation-name: skew4; animation-delay: 32s;"></div>
      <div class="slide-skew slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184737vlurr2lnnj3xruxl.jpg'); animation-name: skew5; animation-delay: 36s;"></div>
      
      <div class="slide-rotate slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184736rc3vxv3zeo4ciwce.jpg'); animation-name: rotateScale; animation-delay: 40s;"></div>
      <div class="slide-push slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184736g544kzc545vpphk4.jpg'); animation-name: pushIn; animation-delay: 44s;"></div>
      <div class="slide-fade-rotate slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184737yfsdjywk8kt6l6y5.jpg'); animation-name: fadeRotate; animation-delay: 48s;"></div>
      <div class="slide-fold slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184737c5ug8dve8uollf2d.jpg'); animation-name: foldOpen; animation-delay: 52s;"></div>
      <div class="slide-shutter slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184737vlurr2lnnj3xruxl.jpg'); animation-name: shutterOpen; animation-delay: 56s;"></div>
      
      <div class="slide-zoom-fade slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184736g544kzc545vpphk4.jpg'); animation-name: zoomFade; animation-delay: 2s;"></div>
      <div class="slide-flip slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184736rc3vxv3zeo4ciwce.jpg'); animation-name: flip; animation-delay: 12s;"></div>
      <div class="slide-slide-up slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184736g544kzc545vpphk4.jpg'); animation-name: slideUp; animation-delay: 22s;"></div>
      <div class="slide-pixelate slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184737c5ug8dve8uollf2d.jpg'); animation-name: pixelate; animation-delay: 32s;"></div>
      <div class="slide-color-fade slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184737vlurr2lnnj3xruxl.jpg'); animation-name: colorFade; animation-delay: 42s;"></div>
      <div class="slide-radial slide-base" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/19/184736rc3vxv3zeo4ciwce.jpg'); animation-name: radialExpand; animation-delay: 52s;"></div>
      
      <audio id="aud" src="https://ting8.yymp3.com/new27/zhaonaiji/2.mp3" autoplay loop></audio>
      <video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/08/02/5d1500e5da309.mp4" autoplay loop muted></video>
    </div>

    <script>
      window.addEventListener('load', () => {
            const eagle1 = document.getElementById('eagle1');
            const eagle2 = document.getElementById('eagle2');
            const container = document.getElementById('mydiv');
            const containerWidth = container.clientWidth;
            const containerHeight = container.clientHeight;

            const flightRange = {
                minX: containerWidth * 0.15,
                maxX: containerWidth * 0.85,
                minY: containerHeight * 0.05,
                maxY: containerHeight * 0.45
            };

            let eagle1State = { x: flightRange.minX + 80, y: flightRange.minY + 30, speedX: 2.3, speedY: 0, scaleX: 1, rotation: 0, opacity: 1 };
            let eagle2State = { x: flightRange.maxX - 80, y: flightRange.minY + 50, speedX: -2.3, speedY: 0, scaleX: -1, rotation: 0, opacity: 1 };

            function updateEagleState(state) {
                state.x += state.speedX;

                if (state.x > flightRange.maxX || state.x < flightRange.minX) {
                  state.x = Math.max(flightRange.minX, Math.min(flightRange.maxX, state.x));
                  state.speedX = -state.speedX;
                  state.scaleX = -state.scaleX;
                }

                state.speedY = Math.sin(state.x * 0.015) * 0.7;
                state.y = Math.max(flightRange.minY, Math.min(flightRange.maxY, state.y + state.speedY));
                state.rotation = state.speedY * 4.5;

                return state;
            }

            function applyStyles(eagle, state) {
                eagle.style.left = `${state.x}px`;
                eagle.style.top = `${state.y}px`;
                eagle.style.opacity = state.opacity;
                eagle.style.transform = `scaleX(${state.scaleX}) rotate(${state.rotation}deg)`;
            }

            function animate() {
                applyStyles(eagle1, updateEagleState(eagle1State));
                applyStyles(eagle2, updateEagleState(eagle2State));
                requestAnimationFrame(animate);
            }

            animate();
      });
    </script>

游侠 发表于 2025-11-21 04:16:22

赞，顶帖角度十分巧妙

suiyueruge 发表于 2025-11-26 21:34:43

赞，顶帖内容精彩无限

RobertWAh 发表于 7 天前

谢谢楼主的辛苦分享

baimudan 发表于 3 天前

支持博主，分享超有深度啦

avomyh 发表于 昨天 13:44

支持博主，分享超级出色
页: [1]
查看完整版本: 【漫步特效】请不要在秋天里失恋