云端漫步 发表于 2025-11-14 18:39:22

【漫步特效】霓虹迷踪

<style>
#mydiv {
    margin: 130px 0 30px calc(50% - 831px);
    display: grid;
    place-items: center;
    width: 1700px;
    height: 850px;
    background: lightblue url('https://s21.ax1x.com/2025/11/14/pZPQOfJ.jpg') no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    user-select: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    opacity: 0;
    animation: fadeCycle 8s infinite;
}
.bg1 { background-image: url('https://s21.ax1x.com/2025/11/14/pZPQOfJ.jpg'); }
.bg2 {
    background-image: url('https://s21.ax1x.com/2025/11/14/pZPQqkF.jpg');
    animation-delay: 2s;
}
.bg3 {
    background-image: url('https://s21.ax1x.com/2025/11/14/pZPQLY4.jpg');
    animation-delay: 4s;
}
.bg4 {
    background-image: url('https://s21.ax1x.com/2025/11/14/pZPQHTU.jpg');
    animation-delay: 6s;
}
@keyframes fadeCycle {
    0% { opacity: 0; }
    5% { opacity: 1; }
    20% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}

#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: 2;
    opacity: .20;
}
#character {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 3;   
    pointer-events: none;
}
</style>

<div id="mydiv">
    <div class="bg-layer bg1"></div>
    <div class="bg-layer bg2"></div>
    <div class="bg-layer bg3"></div>
    <div class="bg-layer bg4"></div>

    <audio id="aud" src="https://mp3.joy127.com/music/12636.mp3" autoplay loop></audio>
    <video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/74/5b4971fc323af.mp4" autoplay loop muted></video>

    <img id="character" src="https://s21.ax1x.com/2025/11/14/pZPQjp9.png" alt="png">
</div>

云端漫步 发表于 2025-11-14 18:39:54

欢迎飞船返回舱成功着陆，神二十乘组三名航天员到家了。

欧阳风刀 发表于 2025-11-14 21:02:59

云端漫步 发表于 2025-11-14 18:39
欢迎飞船返回舱成功着陆，神二十乘组三名航天员到家了。

这就是中国速度。老美好好学习吧。:lol

欧阳风刀 发表于 2025-11-14 21:06:53

挺梦幻的画面，变色光影漂亮，背景与人物结合的真不错。

欧阳风刀 发表于 2025-11-14 21:07:17

感谢漫步兄分享。周末愉快。

玫の玫 发表于 2025-11-14 21:35:58

云端漫步 发表于 2025-11-14 18:39
欢迎飞船返回舱成功着陆，神二十乘组三名航天员到家了。

一起祝贺~

玫の玫 发表于 2025-11-14 21:36:31

漫步老师真勤快！

玫の玫 发表于 2025-11-14 21:36:38

祝创作愉快，天天好心情！

绿蔷薇 发表于 2025-11-23 20:48:45

今天进特效版块，才发觉与精彩擦肩了~~
还好，我来了~~;P

绿蔷薇 发表于 2025-11-23 20:49:29

这素好熟悉
哦，雨儿与云裳也做过的
页: [1] 2
查看完整版本: 【漫步特效】霓虹迷踪