云端漫步 发表于 2025-12-9 20:33:09

【漫步特效】孤房旧忆时光间

<style>
#mydiv {
    margin: 130px 0 30px calc(50% - 900px);
    display: grid;
    place-items: center;
    width: 1700px;
    height: 850px;
    background: lightblue url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/u11.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: 6;
    opacity: .95;
}

.anim-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 3;
    transition: filter 0.4s ease;
}
@keyframes fadeAnim {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes shakeAnim {
    0% { transform: translateX(-100%) rotate(-15deg); opacity: 0; }
    20% { transform: translateX(20px) rotate(10deg); opacity: 1; }
    40% { transform: translateX(-10px) rotate(-5deg); }
    60% { transform: translateX(5px) rotate(2deg); }
    80% { transform: translateX(0) rotate(0); opacity: 1; }
    100% { opacity: 0; }
}
@keyframes rotateAnim {
    0% { transform: rotate(0deg) scale(0.5); opacity: 0; }
    30% { transform: rotate(180deg) scale(1); opacity: 1; }
    80% { transform: rotate(360deg) scale(1); opacity: 1; }
    100% { opacity: 0; }
}
@keyframes flipAnim {
    0% { transform: perspective(1000px) rotateY(90deg); opacity: 0; }
    30% { transform: perspective(1000px) rotateY(0); opacity: 1; }
    80% { transform: perspective(1000px) rotateY(0); opacity: 1; }
    100% { opacity: 0; }
}
@keyframes naturalBrightContrast {
    0% {
      opacity: 0;
      filter: brightness(0.6) contrast(0.9);
    }
    15% {
      opacity: 0.5;
      filter: brightness(0.75) contrast(0.95);
    }
    30% {
      opacity: 1;
      filter: brightness(0.9) contrast(1.05);
    }
    50% {
      filter: brightness(var(--bright-peak, 1.1)) contrast(var(--contrast-peak, 1.15));
    }
    70% {
      filter: brightness(1.05) contrast(1.1);
    }
    85% {
      opacity: 0.5;
      filter: brightness(0.8) contrast(1);
    }
    100% {
      opacity: 0;
      filter: brightness(0.6) contrast(0.9);
    }
}
.fade { animation: fadeAnim 6s forwards ease-in-out; }
.shake { animation: shakeAnim 6s forwards ease-in-out; }
.rotate { animation: rotateAnim 6s forwards ease-in-out; }
.flip { animation: flipAnim 6s forwards ease-in-out; }
.natural-bright-contrast {
    animation: naturalBrightContrast 8s forwards;
    animation-timing-function: ease-in-out;
}
</style>

<div id="mydiv">
    <audio id="aud" src="https://mp3.joy127.com/music/12591.mp3" autoplay loop></audio>
    <video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/23/17/5f59d5e03b0ae.mp4" autoplay="" loop="" muted=""></video>

    <img class="anim-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/u11.jpg" alt="图1">
    <img class="anim-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/u22.jpg" alt="图2">
    <img class="anim-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/u33.jpg" alt="图3">
    <img class="anim-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/u44.jpg" alt="图4">
    <img class="anim-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/u55.jpg" alt="图5">
</div>

<script>
function getRandomValue(base, range) {
    return (base - range + Math.random() * 2 * range).toFixed(2);
}

const imgs = document.querySelectorAll('.anim-img');
const animTypes = ['fade', 'natural-bright-contrast', 'rotate', 'natural-bright-contrast', 'flip'];
let currentIndex = 0;

function startAnimation() {
    imgs.forEach(img => {
      img.className = 'anim-img';
      img.style.filter = '';
    });
    const currentImg = imgs;
    currentImg.classList.add(animTypes);
      if (animTypes === 'natural-bright-contrast') {
      currentImg.style.setProperty('--bright-peak', getRandomValue(1.1, 0.05));
      currentImg.style.setProperty('--contrast-peak', getRandomValue(1.15, 0.05));
    }

    currentIndex = (currentIndex + 1) % imgs.length;
}
startAnimation();
setInterval(startAnimation, 8000);
</script>

欧阳风刀 发表于 2025-12-9 21:58:56

首席欣赏。问好漫步兄。

欧阳风刀 发表于 2025-12-9 21:59:30

色彩漂亮，转场效果精彩。配乐动听。欣赏。:handshake

安月 发表于 2025-12-9 22:34:03

这个特效好看还能翻跟头旋转。

圊圊淥詶 发表于 2025-12-10 09:45:56

欣赏漫步老师的精美特效，~~

圊圊淥詶 发表于 2025-12-10 09:46:32

漫步老师辛苦了，谢谢制作分享~~{:1_155:}

玫の玫 发表于 2025-12-10 10:55:33

欣赏老师美作，
感谢精彩分享，
感谢给大家带来美滴享受！
祝创作愉快，
天天好心情！

玫の玫 发表于 2025-12-10 11:01:34

暖橙的晕漫过旧钟，
连字里的紫都沾了这缕热，
衬得回忆的长更显绵柔。
{:1_154:}

玫の玫 发表于 2025-12-10 11:03:06

朦胧的红浸在房里，
亮片与旧影融成沉软的画，
把旧忆的意写成了眸里的光。
整体效果美美哒！

绿蔷薇 发表于 2025-12-10 12:19:59

安月 发表于 2025-12-9 22:34
这个特效好看还能翻跟头旋转。

点评幽默~~;P
页: [1] 2
查看完整版本: 【漫步特效】孤房旧忆时光间