网站首页 › ┫特效音画┣ › 【漫步特效】长相思/素材一鹿向北

云端漫步 发表于 2026-1-10 19:29:18

【漫步特效】长相思/素材一鹿向北

<style>
#mydiv {
    margin: 130px 0 30px calc(50% - 900px);
    display: grid;
    place-items: center;
    width: 1700px;
    height: 850px;
    background: lightblue url('https://644220.freep.cn/644220/aa/sn22.jpg') no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    user-select: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
#top-png {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 10;
    pointer-events: none;
}
#vid {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .15;
    z-index: 6;
    mask: none !important;
    -webkit-mask: none !important;
    clip-path: none !important;
}

.slide-container {
    position: absolute;
    width: 1700px;
    height: 850px;
    top: 0;
    left: 0;
    z-index: 5;
    overflow: hidden;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    background-size: cover;
    background-position: center;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    transform: translateZ(0);
    backface-visibility: hidden;
    mask: none !important;
    -webkit-mask: none !important;
    clip-path: none !important;
}

.slide1 {
    background-image: url('https://644220.freep.cn/644220/aa/sn11.jpg');
    animation-name: fadeInOut;
    animation-delay: 0s;
}
.slide2 {
    background-image: url('https://644220.freep.cn/644220/aa/sn22.jpg');
    animation-name: slideInRight;
    animation-delay: 5s;
}
.slide3 {
    background-image: url('https://644220.freep.cn/644220/aa/sn33.jpg');
    animation-name: rotateIn;
    animation-delay: 10s;
}
.slide4 {
    background-image: url('https://644220.freep.cn/644220/aa/sn44.jpg');
    animation-name: scaleIn;
    animation-delay: 15s;
}
.slide5 {
    background-image: url('https://644220.freep.cn/644220/aa/sn55.jpg');
    animation-name: blurIn;
    animation-delay: 20s;
}
.slide6 {
    background-image: url('https://644220.freep.cn/644220/aa/sn11.jpg');
    animation-name: slideInUp;
    animation-delay: 25s;
}
.slide7 {
    background-image: url('https://644220.freep.cn/644220/aa/sn22.jpg');
    animation-name: flipInX;
    animation-delay: 30s;
}
.slide8 {
    background-image: url('https://644220.freep.cn/644220/aa/sn33.jpg');
    animation-name: skewIn;
    animation-delay: 35s;
}
.slide9 {
    background-image: url('https://644220.freep.cn/644220/aa/sn44.jpg');
    animation-name: colorFadeIn;
    animation-delay: 40s;
}
.slide10 {
    background-image: url('https://644220.freep.cn/644220/aa/sn55.jpg');
    animation-name: clipPathIn;
    animation-delay: 45s;
}

.slide11 {
    background-image: url('https://644220.freep.cn/644220/aa/sn11.jpg');
    animation-name: rotate3dIn;
    animation-delay: 50s;
}
.slide12 {
    background-image: url('https://644220.freep.cn/644220/aa/sn22.jpg');
    animation-name: gridIn;
    animation-delay: 55s;
}
.slide13 {
    background-image: url('https://644220.freep.cn/644220/aa/sn33.jpg');
    animation-name: waveIn;
    animation-delay: 60s;
}
.slide14 {
    background-image: url('https://644220.freep.cn/644220/aa/sn44.jpg');
    animation-name: shadowIn;
    animation-delay: 65s;
}
.slide15 {
    background-image: url('https://644220.freep.cn/644220/aa/sn55.jpg');
    animation-name: doubleFadeIn;
    animation-delay: 70s;
}

.slide16 {
    background-image: url('https://644220.freep.cn/644220/aa/sn22.jpg');
    animation-name: bottomLeftZoomIn;
    animation-delay: 75s;
}
.slide17 {
    background-image: url('https://644220.freep.cn/644220/aa/sn22.jpg');
    animation-name: bottomLeftFadeIn;
    animation-delay: 80s;
}
.slide18 {
    background-image: url('https://644220.freep.cn/644220/aa/sn22.jpg');
    animation-name: bottomLeftSlideIn;
    animation-delay: 85s;
}
.slide19 {
    background-image: url('https://644220.freep.cn/644220/aa/sn22.jpg');
    animation-name: bottomLeftBlurIn;
    animation-delay: 90s;
}
.slide20 {
    background-image: url('https://644220.freep.cn/644220/aa/sn22.jpg');
    animation-name: bottomLeftRotateIn;
    animation-delay: 95s;
}

@keyframes fadeInOut {
    0%, 18% { opacity: 1; }
    20%, 100% { opacity: 0; }
}
@keyframes slideInRight {
    0%, 2% { opacity: 0; transform: translateX(100%); }
    10%, 18% { opacity: 1; transform: translateX(0); }
    20%, 100% { opacity: 0; transform: translateX(-100%); }
}
@keyframes rotateIn {
    0%, 2% { opacity: 0; transform: rotate(90deg) scale(0.5); }
    10%, 18% { opacity: 1; transform: rotate(0) scale(1); }
    20%, 100% { opacity: 0; transform: rotate(-90deg) scale(0.5); }
}
@keyframes scaleIn {
    0%, 2% { opacity: 0; transform: scale(0); }
    10%, 18% { opacity: 1; transform: scale(1); }
    20%, 100% { opacity: 0; transform: scale(2); }
}
@keyframes blurIn {
    0%, 2% { opacity: 0; filter: blur(20px); }
    10%, 18% { opacity: 1; filter: blur(0); }
    20%, 100% { opacity: 0; filter: blur(20px); }
}
@keyframes slideInUp {
    0%, 2% { opacity: 0; transform: translateY(80%); }
    10%, 18% { opacity: 1; transform: translateY(0); }
    20%, 100% { opacity: 0; transform: translateY(-80%); }
}
@keyframes flipInX {
    0%, 2% { opacity: 0; transform: perspective(400px) rotateX(60deg); }
    10%, 18% { opacity: 1; transform: perspective(400px) rotateX(0) translateY(0); }
    20%, 100% { opacity: 0; transform: perspective(400px) rotateX(-60deg); }
}
@keyframes skewIn {
    0%, 2% { opacity: 0; transform: skew(10deg, 5deg) scale(0.9); }
    10%, 18% { opacity: 1; transform: skew(0) scale(1); }
    20%, 100% { opacity: 0; transform: skew(-10deg, -5deg) scale(0.9); }
}
@keyframes colorFadeIn {
    0%, 2% { opacity: 0; filter: grayscale(80%) brightness(0.7); }
    10%, 18% { opacity: 1; filter: grayscale(0%) brightness(1); }
    20%, 100% { opacity: 0; filter: grayscale(80%) brightness(0.7); }
}
@keyframes clipPathIn {
    0%, 2% { opacity: 0; clip-path: circle(5% at 50% 50%); }
    10%, 18% { opacity: 1; clip-path: circle(95% at 50% 50%); }
    20%, 100% { opacity: 0; clip-path: circle(5% at 50% 50%); }
}
@keyframes rotate3dIn {
    0%, 2% { opacity: 0; transform: rotate3d(1, 1, 0, 180deg) scale(0.8); }
    10%, 18% { opacity: 1; transform: rotate3d(0, 0, 0, 0) scale(1); }
    20%, 100% { opacity: 0; transform: rotate3d(-1, -1, 0, 180deg) scale(0.8); }
}
@keyframes gridIn {
    0%, 2% {
      opacity: 0;
      clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%);
    }
    10%, 18% {
      opacity: 1;
      clip-path: polygon(
            0% 0%, 33% 0%, 33% 33%, 0% 33%,
            33% 0%, 66% 0%, 66% 33%, 33% 33%,
            66% 0%, 100% 0%, 100% 33%, 66% 33%,
            0% 33%, 33% 33%, 33% 66%, 0% 66%,
            33% 33%, 66% 33%, 66% 66%, 33% 66%,
            66% 33%, 100% 33%, 100% 66%, 66% 66%,
            0% 66%, 33% 66%, 33% 100%, 0% 100%,
            33% 66%, 66% 66%, 66% 100%, 33% 100%,
            66% 66%, 100% 66%, 100% 100%, 66% 100%
      );
    }
    20%, 100% {
      opacity: 0;
      clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
    }
}
@keyframes waveIn {
    0%, 2% { opacity: 0; transform: translateY(50%) skewY(15deg) scale(0.9); }
    5% { transform: translateY(25%) skewY(7deg) scale(0.95); }
    10%, 18% { opacity: 1; transform: translateY(0) skewY(0) scale(1); }
    20%, 100% { opacity: 0; transform: translateY(-50%) skewY(-15deg) scale(0.9); }
}
@keyframes shadowIn {
    0%, 2% {
      opacity: 0;
      transform: scale(0.95);
      box-shadow: 0 0 0 rgba(0,0,0,0), inset 0 0 50px rgba(0,0,0,0.8);
    }
    10%, 18% {
      opacity: 1;
      transform: scale(1);
      box-shadow: 0 0 30px rgba(255,255,255,0.5), inset 0 0 0 rgba(0,0,0,0);
    }
    20%, 100% {
      opacity: 0;
      transform: scale(0.95);
      box-shadow: 0 0 0 rgba(0,0,0,0), inset 0 0 50px rgba(0,0,0,0.8);
    }
}
@keyframes doubleFadeIn {
    0%, 2% { opacity: 0; filter: brightness(0) contrast(2); }
    5% { opacity: 0.3; filter: brightness(0.4) contrast(1.5); }
    10%, 18% { opacity: 1; filter: brightness(1) contrast(1); }
    20%, 100% { opacity: 0; filter: brightness(0) contrast(2); }
}

@keyframes bottomLeftZoomIn {
    0%, 2% {
      opacity: 0;
      transform: scale(0);
      transform-origin: 0% 100%;
    }
    10%, 18% {
      opacity: 1;
      transform: scale(1);
      transform-origin: 0% 100%;
    }
    20%, 100% {
      opacity: 0;
      transform: scale(2);
      transform-origin: 0% 100%;
    }
}

@keyframes bottomLeftFadeIn {
    0%, 2% {
      opacity: 0;
      clip-path: inset(80% 80% 0 0);
    }
    10%, 18% {
      opacity: 1;
      clip-path: inset(0 0 0 0);
    }
    20%, 100% {
      opacity: 0;
      clip-path: inset(0 0 80% 80%);
    }
}

@keyframes bottomLeftSlideIn {
    0%, 2% {
      opacity: 0;
      transform: translate(-50%, 50%) rotate(-15deg);
    }
    10%, 18% {
      opacity: 1;
      transform: translate(0, 0) rotate(0);
    }
    20%, 100% {
      opacity: 0;
      transform: translate(50%, -50%) rotate(15deg);
    }
}

@keyframes bottomLeftBlurIn {
    0%, 2% {
      opacity: 0;
      filter: blur(30px);
      transform-origin: 0% 100%;
    }
    5% { filter: blur(20px); opacity: 0.2; }
    10%, 18% {
      opacity: 1;
      filter: blur(0);
      transform-origin: 0% 100%;
    }
    20%, 100% {
      opacity: 0;
      filter: blur(30px);
      transform-origin: 0% 100%;
    }
}

@keyframes bottomLeftRotateIn {
    0%, 2% {
      opacity: 0;
      transform: rotate(-90deg) scale(0.8);
      transform-origin: 0% 100%;
    }
    10%, 18% {
      opacity: 1;
      transform: rotate(0) scale(1);
      transform-origin: 0% 100%;
    }
    20%, 100% {
      opacity: 0;
      transform: rotate(90deg) scale(0.8);
      transform-origin: 0% 100%;
    }
}
</style>

<div id="mydiv">
    <img id="top-png" src="https://644220.freep.cn/644220/aa/err.png" alt="fg">
   
    <audio id="aud" src="https://mp3.joy127.com/music/12666.mp3" autoplay loop></audio>
    <video id="vid" src="https://644220.freep.cn/644220/qq/16.mp4" autoplay loop muted></video>
   
    <div class="slide-container">
      <div class="slide slide1"></div>
      <div class="slide slide2"></div>
      <div class="slide slide3"></div>
      <div class="slide slide4"></div>
      <div class="slide slide5"></div>
      <div class="slide slide6"></div>
      <div class="slide slide7"></div>
      <div class="slide slide8"></div>
      <div class="slide slide9"></div>
      <div class="slide slide10"></div>
      <div class="slide slide11"></div>
      <div class="slide slide12"></div>
      <div class="slide slide13"></div>
      <div class="slide slide14"></div>
      <div class="slide slide15"></div>
      <div class="slide slide16"></div>
      <div class="slide slide17"></div>
      <div class="slide slide18"></div>
      <div class="slide slide19"></div>
      <div class="slide slide20"></div>
    </div>
</div>

云端漫步 发表于 2026-1-10 19:31:37

素材
https://pic1.imgdb.cn/item/695d9cc0a9c8408628b8ae0c.jpg
https://pic1.imgdb.cn/item/695d9d12a9c8408628b8ae0d.jpg
https://pic1.imgdb.cn/item/695d9d1fa9c8408628b8ae0e.jpg
https://pic1.imgdb.cn/item/695d9d5ba9c8408628b8ae10.jpg
https://pic1.imgdb.cn/item/695d9d7ba9c8408628b8ae11.jpg

玫の玫 发表于 2026-1-10 19:56:45

听乐赏图，真是美美哒！
听音乐带来好心情，赞赞赞！

玫の玫 发表于 2026-1-10 19:57:34

漫步老师这个制作太精彩了，
每一张兔兔都很美，
特效效果美美哒，
欣赏点赞送花花！
{:1_154:}{:1_155:}

玫の玫 发表于 2026-1-10 19:58:11

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

圊圊淥詶 发表于 2026-1-10 20:13:28

这是很费功夫的制作哈，
所有的素材都做进去了，辛苦辛苦~~

圊圊淥詶 发表于 2026-1-10 20:13:46

问好漫步老师，制作分享辛苦了~~

绿蔷薇 发表于 2026-1-10 21:50:44

好巧，与我们这月的同素撞上了~~~{:S16:}

绿蔷薇 发表于 2026-1-10 21:53:39

这确实很费功夫的，相当于做了五幅单图，每一张处理的相当漂亮，转场自然流畅，视听的享受~~~{:9_280:}

绿蔷薇 发表于 2026-1-10 21:54:20

漫步老师制作辛苦了
谢谢带来的精彩作品
遥祝周末快乐哈~~~
{:9_285:}

查看完整版本: 【漫步特效】长相思/素材一鹿向北