云端漫步 发表于 2026-6-11 18:44:28

【云荷六月同图】【漫步特效6】夏天就这样悄悄地来了（CSS六张）

本帖最后由 云端漫步 于 2026-6-24 18:05 编辑 <br /><br /><style>
    #mydiv {
      margin: 130px 0 30px calc(50% - 931px);
      display: grid;
      place-items: center;
      width: 1700px;
      height: 850px;
      background: lightblue url('https://644220.freep.cn/644220/2/q22.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      user-select: none;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }

    #vid, #vid2 {
      position: absolute;
      width: 130%;
      height: 130%;
      object-fit: cover;
      pointer-events: none;
    }

    #vid {
      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: .17;
    }

    #vid2 {
      mix-blend-mode: overlay;
      z-index: 3;
      opacity: .2;
    }

    .loop-img-container {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
      animation: totalCycle 108s infinite linear;
    }

    .loop-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      animation: 22s infinite cubic-bezier(0.34, 1.56, 0.64, 1);
      transform: translateZ(0);
      backface-visibility: hidden;
    }

    @keyframes img1Anim {
      0% { opacity: 0; transform: rotateY(180deg) scale(0.8); }
      15% { opacity: 1; transform: rotateY(0) scale(1); }
      75% { opacity: 1; transform: rotateY(0) scale(1); }
      90% { opacity: 0; transform: rotateY(-180deg) scale(0.8); }
      100% { opacity: 0; }
    }

    @keyframes img2Anim {
      0% { opacity: 0; transform: scale(0.5); filter: saturate(0); }
      15% { opacity: 1; transform: scale(1); filter: saturate(1.2); }
      25% { transform: scale(1.05); }
      35% { transform: scale(1); }
      75% { opacity: 1; transform: scale(1); filter: saturate(1.2); }
      90% { opacity: 0; transform: scale(0.5); filter: saturate(0); }
      100% { opacity: 0; }
    }

    @keyframes img3Anim {
      0% { opacity: 0; clip-path: circle(0% at center); }
      25% { opacity: 1; clip-path: circle(150% at center); }
      75% { opacity: 1; clip-path: circle(150% at center); }
      90% { opacity: 0; clip-path: circle(0% at center); }
      100% { opacity: 0; }
    }

    @keyframes img4Anim {
      0% { opacity: 0; transform: translateX(-100%) skewX(-15deg); }
      10% { transform: translateX(-50%) skewX(10deg); }
      15% { opacity: 1; transform: translateX(0) skewX(0); }
      75% { opacity: 1; transform: translateX(0) skewX(0); }
      85% { transform: translateX(50%) skewX(-10deg); }
      90% { opacity: 0; transform: translateX(100%) skewX(15deg); }
      100% { opacity: 0; }
    }

    @keyframes img5Anim {
      0% { opacity: 0; filter: drop-shadow(0 0 20px rgba(255,255,255,0)) brightness(0); }
      5% { opacity: 0.3; filter: drop-shadow(0 0 20px rgba(255,255,255,0.8)) brightness(1.5); }
      10% { opacity: 0.7; filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)) brightness(1.2); }
      15% { opacity: 1; filter: drop-shadow(0 0 5px rgba(255,255,255,0.3)) brightness(1); }
      75% { opacity: 1; filter: drop-shadow(0 0 5px rgba(255,255,255,0.3)) brightness(1); }
      85% { opacity: 0.3; filter: drop-shadow(0 0 20px rgba(255,255,255,0.8)) brightness(1.5); }
      90% { opacity: 0; filter: drop-shadow(0 0 20px rgba(255,255,255,0)) brightness(0); }
      100% { opacity: 0; }
    }

    /* ? 彻底修复：a666.jpg 收缩 + 平滑淡出，无硬切 */
    @keyframes img6Anim {
      0%{ opacity: 0; transform: scale(0.8); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
      15% { opacity: 1; transform: scale(1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
      70% { opacity: 1; transform: scale(1); }
      80% { opacity: 0.6; transform: scale(0.92); }
      85% { opacity: 0.3; transform: scale(0.88); }
      90% { opacity: 0; transform: scale(0.8); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
      100%{ opacity: 0; }
    }

    @keyframes totalCycle {
      0%, 100% { transform: translate(0); }
    }

    .img1 { animation-name: img1Anim; animation-delay: 0s; }
    .img2 { animation-name: img2Anim; animation-delay: 15s; }
    .img3 { animation-name: img3Anim; animation-delay: 30s; }
    .img4 { animation-name: img4Anim; animation-delay: 35s; }
    .img5 { animation-name: img5Anim; animation-delay: 40s; }
    .img6 { animation-name: img6Anim; animation-delay: 45s; }
</style>

<div id="mydiv">
    <audio id="aud" src="https://ting9.yymp3.com/yymp3/01cn/04new/929/006.mp3" autoplay loop></audio>
    <video id="vid2" src="https://img2.tukuppt.com/video_show/2629112/00/02/06/5b509c34df30f.mp4" autoplay loop muted></video>

    <div class="loop-img-container">
      <img src="https://644220.freep.cn/644220/2/q112.jpg" class="loop-img img1">
      <img src="https://644220.freep.cn/644220/2/q22.jpg" class="loop-img img2">
      <img src="https://644220.freep.cn/644220/2/q33.jpg" class="loop-img img3">
      <img src="https://644220.freep.cn/644220/2/q44.jpg" class="loop-img img4">
      <img src="https://644220.freep.cn/644220/2/q55.jpg" class="loop-img img5">
      <img src="https://644220.freep.cn/644220/2/q66.jpg" class="loop-img img6">
    </div>
</div>

云端漫步 发表于 2026-6-11 18:45:23

@绿蔷薇 @圊圊淥詶 @浅唱 @念若莲 @玫の玫 @姚云裳

绿蔷薇 发表于 2026-6-11 19:49:44

背景与人物契合的真好
漫山的野花给人初夏的惊喜
搭配做旧的布纹滤镜
营造出清新治愈的怀旧氛围~

绿蔷薇 发表于 2026-6-11 19:50:58

夏天就这样悄悄地来了
青春不会回来了~~~

绿蔷薇 发表于 2026-6-11 19:53:29

六幅作品
转场自然流畅
特效的加入
让静态的画面活了起来

绿蔷薇 发表于 2026-6-11 19:54:18

谢谢漫步老师，制作辛苦了，遥祝漫步老师创作愉快、夏日安好 ~~~{:1_153:}

汐云渡 发表于 2026-6-11 20:31:59

欣赏漫步老师的精美制作，每一幅图都丝滑转场，制作辛苦

玫の玫 发表于 2026-6-11 20:35:34

饭后欣赏漫步老师精美同图，每一幅图都很漂亮，欣赏点赞！{:1_154:}{:1_153:}{:1_155:}

玫の玫 发表于 2026-6-11 20:36:54

制作细腻，意境优美，溶图漂亮，人物处理美美哒，整体效果棒棒哒。

姚云裳 发表于 2026-6-11 20:41:19

特效不错，场景切换自如
意境优美，FS加的恰好
欣赏并学习，问好
页: [1] 2 3
查看完整版本: 【云荷六月同图】【漫步特效6】夏天就这样悄悄地来了（CSS六张）