【云裳特效】那抹黄，是远方的序

姚云裳 发表于 2026-6-24 22:55

本帖最后由姚云裳于 2026-6-25 23:09 编辑 <br /><br /><style>
   #mydiv {
         margin: 150px 0 30px calc(50% - 900px);
         display: grid;
         place-items: center;
         width: 1920px;
         height: 1020px;
         background: lightblue url('https://mpimg.cn/view.php/9a3d37daf4cf99a0ef381347b6803ef1.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: .27;
   }

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

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

   .loop-img {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         opacity: 0;
         animation: 16s 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); }
         15% { opacity: 1; clip-path: circle(50% at center); }
         75% { opacity: 1; clip-path: circle(50% 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; }
   }

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

   .img1 { animation-name: img1Anim; animation-delay: 0s; }
   .img2 { animation-name: img2Anim; animation-delay: 13s; }
   .img3 { animation-name: img3Anim; animation-delay: 26s; }
   .img4 { animation-name: img4Anim; animation-delay: 39s; }
   .img5 { animation-name: img5Anim; animation-delay: 52s; }
</style>
</head>
<body>
<div id="mydiv">
   <audio id="aud" src="https://www.joy127.com/url/1519014afac12e.mp3" autoplay loop></audio>
   <video id="vid" src="https://yw83yw.oss-cn-hangzhou.aliyuncs.com/lvzhou/flash/MP4/DH04.mp4" autoplay loop muted></video>
   <video id="vid2" src="https://yw83yw.oss-cn-hangzhou.aliyuncs.com/lvzhou/flash/MP4/DH04.mp4" autoplay loop muted></video>

   <div class="loop-img-container">
         <img src="https://mpimg.cn/view.php/ab9d4fc5b6fde512679f2d63a832520f.jpg" class="loop-img img1">
         <img src="https://mpimg.cn/view.php/c54d6873543e7cd0a0e766f73ebcde67.jpg" class="loop-img img2">
         <img src="https://mpimg.cn/view.php/341eeaec4edbb1d4bb03a7e84489f4f8.jpg" class="loop-img img3">
         <img src="https://mpimg.cn/view.php/ae42a907174d3d6ef2dc2d36bccf42cc.jpg" class="loop-img img4">
         <img src="https://mpimg.cn/view.php/77a220301c4acb36e44d4a98c3191d4f.jpg" class="loop-img img5">
   </div>
</div>
</body>

梦江南 发表于 2026-6-25 07:55

动画切换自由，画面人物真漂亮。欣赏问好！{:4_187:}

红影发表于 2026-6-25 15:40

制作非常漂亮，只是没居中，这么大的图，不居中的话，会让很多页面在外面了。
欣赏云裳好帖{:4_187:}

姚云裳 发表于 2026-6-25 23:09

梦江南发表于 2026-6-25 07:55
动画切换自由，画面人物真漂亮。欣赏问好！

谢谢欣赏和点评，问好

姚云裳 发表于 2026-6-25 23:09

红影发表于 2026-6-25 15:40
制作非常漂亮，只是没居中，这么大的图，不居中的话，会让很多页面在外面了。
欣赏云裳好帖

谢谢欣赏和点评，问好

红影发表于 2026-6-27 22:31

姚云裳发表于 2026-6-25 23:09
谢谢欣赏和点评，问好

不客气，问好云裳{:4_187:}

魏淑芬 发表于 2026-6-28 16:19

歌曲好听，画面好看，欣赏点赞！{:4_204:}
如果有歌词就更好了。

姚云裳 发表于 2026-6-28 16:26

魏淑芬发表于 2026-6-28 16:19
歌曲好听，画面好看，欣赏点赞！
如果有歌词就更好了。

谢谢欣赏和点评，。问好，你这头像太好玩了

魏淑芬 发表于 2026-6-28 16:51

姚云裳发表于 2026-6-28 16:26
谢谢欣赏和点评，。问好，你这头像太好玩了

网名与头像一致{:4_189:}

页: [1]

花潮论坛's Archiver

【云裳特效】那抹黄，是远方的序