【漫步特效】时光飞逝 - ┫特效音画┣ - 云荷-个人作品展示 - Powered by Discuz! Archiver

网站首页 › ┫特效音画┣ › 【漫步特效】时光飞逝

云端漫步 发表于 2025-9-24 15:32:00

【漫步特效】时光飞逝

<style>
#mydiv {
margin: 130px 0 30px calc(50% - 900px);
display: grid;
place-items: center;
width: 1700px;
height: 850px;
background: #000;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;
}
#vid {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
mix-blend-mode: overlay;
opacity: .1;
z-index: 15;
will-change: opacity;
backface-visibility: hidden;
}
#background-image {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 1;
z-index: 4;
top: 0;
left: 0;
transition: background-image 2s ease-in-out;
}
.animated-image {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
z-index: 5;
will-change: opacity, transform, filter;
backface-visibility: hidden;
top: 0;
left: 0;
transition: opacity 3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 图片背景 */
#background-image,
#image1 { background-image: url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/3/2dfd.jpg'); }
#image2 { background-image: url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/3/3dfd.jpg'); }
#image3 { background-image: url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/3/4dfd.jpg'); }
#image4 { background-image: url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/3/5dfd.jpg'); }
#image5 { background-image: url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/3/1dfd.jpg'); }

/* 入场动画效果类 */
.blinds { animation: blinds 10s forwards cubic-bezier(0.34, 1.56, 0.64, 1); } /* 延长百叶窗动画时间 */
.vertical-slide { animation: verticalSlide 10s forwards cubic-bezier(0.25, 0.1, 0.25, 1); }
.horizontal-scan { animation: horizontalScan 8s forwards cubic-bezier(0.34, 1.56, 0.64, 1); }
.rotate-unfold { animation: rotateUnfold 8s forwards cubic-bezier(0.34, 1.56, 0.64, 1); }
.scale-fade { animation: scaleFade 8s forwards cubic-bezier(0.34, 1.56, 0.64, 1); }

/* 创意转场特效 */
.pixel-dissolve { animation: pixelDissolve 4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.cube-flip { animation: cubeFlip 4s forwards cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; }
.wave-wipe { animation: waveWipe 4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.light-leak { animation: lightLeak 4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.page-curl { animation: pageCurl 4s forwards cubic-bezier(0.4, 0, 0.2, 1); transform-origin: bottom right; }
@keyframes blinds {
0% {
   /* 初始状态*/
   clip-path: polygon(
         0 0, 100% 0, 100% 0, 0 0,
         0 10%, 100% 10%, 100% 10%, 0 10%,
         0 20%, 100% 20%, 100% 20%, 0 20%,
         0 30%, 100% 30%, 100% 30%, 0 30%,
         0 40%, 100% 40%, 100% 40%, 0 40%,
         0 50%, 100% 50%, 100% 50%, 0 50%,
         0 60%, 100% 60%, 100% 60%, 0 60%,
         0 70%, 100% 70%, 100% 70%, 0 70%,
         0 80%, 100% 80%, 100% 80%, 0 80%,
         0 90%, 100% 90%, 100% 90%, 0 90%
   );
   opacity: 0;
}
20% { opacity: 0.8; }
100% {
   /* 结束状态 */
   clip-path: polygon(
         0 0, 100% 0, 100% 10%, 0 10%,
         0 10%, 100% 10%, 100% 20%, 0 20%,
         0 20%, 100% 20%, 100% 30%, 0 30%,
         0 30%, 100% 30%, 100% 40%, 0 40%,
         0 40%, 100% 40%, 100% 50%, 0 50%,
         0 50%, 100% 50%, 100% 60%, 0 60%,
         0 60%, 100% 60%, 100% 70%, 0 70%,
         0 70%, 100% 70%, 100% 80%, 0 80%,
         0 80%, 100% 80%, 100% 90%, 0 90%,
         0 90%, 100% 90%, 100% 100%, 0 100%
   );
   opacity: 1;
}
}
@keyframes verticalSlide {
0% {
   transform: translateY(100%);
   opacity: 0;
}
10% {
   transform: translateY(90%);
   opacity: 0.1;
}
30% {
   transform: translateY(60%);
   opacity: 0.4;
}
70% {
   transform: translateY(20%);
   opacity: 0.8;
}
90% {
   transform: translateY(5%);
   opacity: 0.95;
}
95% {
   transform: translateY(-2%);
   opacity: 1;
}
100% {
   transform: translateY(0);
   opacity: 1;
}
}
@keyframes horizontalScan {
0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); opacity: 0; }
20% { opacity: 0.8; }
100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
}
@keyframes rotateUnfold {
0% { transform: rotate(-15deg) scale(0.7); opacity: 0; filter: brightness(0.5); }
20% { opacity: 0.8; }
100% { transform: rotate(0) scale(1); opacity: 1; filter: brightness(1); }
}
@keyframes scaleFade {
0% { transform: scale(1.3); opacity: 0; filter: blur(5px); }
20% { opacity: 0.8; }
100% { transform: scale(1); opacity: 1; filter: blur(0); }
}
@keyframes pixelDissolve {
0% {
   opacity: 1;
   transform: scale(1);
   filter: pixelate(0px);
}
50% {
   filter: pixelate(20px);
}
100% {
   opacity: 0;
   transform: scale(1.1);
   filter: pixelate(40px);
}
}
@keyframes cubeFlip {
0% {
   opacity: 1;
   transform: rotateY(0deg) translateZ(0);
}
50% {
   transform: rotateY(90deg) translateZ(50px);
   opacity: 0.8;
}
100% {
   opacity: 0;
   transform: rotateY(180deg) translateZ(0);
}
}
@keyframes waveWipe {
0% {
   opacity: 1;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
100% {
   opacity: 0;
   clip-path: polygon(
         0 -50%, 100% -50%,
         calc(100% + 50px) calc(100% + 50px),
         -50px calc(100% + 50px)
   );
}
}
@keyframes lightLeak {
0% {
   opacity: 1;
   filter: hue-rotate(0deg) brightness(1);
}
50% {
   filter: hue-rotate(180deg) brightness(1.5);
}
100% {
   opacity: 0;
   filter: hue-rotate(360deg) brightness(0);
}
}
@keyframes pageCurl {
0% {
   opacity: 1;
   transform: rotate(0deg) scale(1);
}
100% {
   opacity: 0;
   transform: rotate(30deg) scale(0.8);
   filter: brightness(0.5);
}
}
.animated-image {
animation-fill-mode: forwards;
}
/* 视频加载状态 */
#video-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 20;
color: white;
display: none;
}
#video-loading::after {
content: "";
display: block;
width: 40px;
height: 40px;
border: 3px solid rgba(255,255,255,0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
margin: 10px auto;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@supports not (filter: pixelate(0px)) {
@keyframes pixelDissolve {
   0% {
         opacity: 1;
         transform: scale(1);
         image-rendering: auto;
   }
   100% {
         opacity: 0;
         transform: scale(1.1);
         image-rendering: pixelated;
   }
}
}
</style>
<div id="mydiv">
<audio id="aud" src="https://mp3.joy127.com/music/12494.mp3" autoplay loop></audio>
<div id="video-loading">视频加载中...</div>
<video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f2ae929323.mp4"
      autoplay loop muted preload="auto" playsinline>
</video>
   
<div id="background-image"></div>
   
<div id="image1" class="animated-image"></div>
<div id="image2" class="animated-image"></div>
<div id="image3" class="animated-image"></div>
<div id="image4" class="animated-image"></div>
<div id="image5" class="animated-image"></div>
</div>
<script>
// 图片和动画配置
const images = [
{ id: 'image1', animation: 'blinds', name: '第一张图（百叶窗效果）' },
{ id: 'image2', animation: 'vertical-slide', name: '第二张图（垂直滑动）' },
{ id: 'image3', animation: 'horizontal-scan', name: '第三张图（水平扫描）' },
{ id: 'image4', animation: 'rotate-unfold', name: '第四张图（旋转展开）' },
{ id: 'image5', animation: 'scale-fade', name: '第五张图（缩放淡入）' }
];
// 创意转场特效列表
const transitionEffects = [
'pixel-dissolve',// 像素化溶解效果
'cube-flip',    // 立体翻转效果
'wave-wipe',    // 波浪擦拭效果
'light-leak',    // 光线泄漏效果
'page-curl'    // 页面卷曲效果
];
let currentIndex = 0;
const animationDuration = 18000; // 整体动画持续时间
const transitionDuration = 4000; // 过渡动画时间
let isVideoReady = false;
let animationFrameId = null;
// 初始化视频
const video = document.getElementById('vid');
const videoLoading = document.getElementById('video-loading');
// 视频加载优化
function initVideo() {
videoLoading.style.display = 'block';

video.addEventListener('canplay', () => {
   isVideoReady = true;
   videoLoading.style.display = 'none';
   startSlideshow();
});

video.addEventListener('error', () => {
   console.error('视频');
   videoLoading.textContent = '视频';
});
video.load();
}
function initImages() {
images.forEach(img => {
   const element = document.getElementById(img.id);
   if (element) {
         element.style.opacity = 0;
         element.classList.remove(img.animation);
         transitionEffects.forEach(effect => {
            element.classList.remove(effect);
         });
   }
});
}
function getRandomEffect() {
const randomIndex = Math.floor(Math.random() * transitionEffects.length);
return transitionEffects;
}
function showNextImage() {
if (!isVideoReady) {
   setTimeout(showNextImage, 100);
   return;
}
if (animationFrameId) {
   cancelAnimationFrame(animationFrameId);
}
   const currentImage = document.getElementById(images.id);
if (!currentImage) {
   console.error(`图片元素 `);
   return;
}
const prevIndex = (currentIndex - 1 + images.length) % images.length;
const prevImage = document.getElementById(images.id);
currentImage.style.zIndex = 10;
if (prevImage) {
   prevImage.style.zIndex = 9;
}
   animationFrameId = requestAnimationFrame(() => {
   currentImage.style.opacity = 0;
   currentImage.classList.remove(images.animation);
   currentImage.offsetHeight;

   currentImage.classList.add(images.animation);

   requestAnimationFrame(() => {
         currentImage.style.opacity = 1;
   });
});
   if (prevImage) {
   transitionEffects.forEach(effect => {
         prevImage.classList.remove(effect);
   });
      const delay = 1000;
   setTimeout(() => {
         requestAnimationFrame(() => {
            const randomEffect = getRandomEffect();
            prevImage.classList.add(randomEffect);

            // 为3D效果添加容器透视
            if (randomEffect === 'cube-flip') {
               prevImage.parentElement.style.perspective = '1000px';
            } else {
               prevImage.parentElement.style.perspective = '';
            }
         });
   }, delay);
}
   const backgroundImage = document.getElementById('background-image');
if (backgroundImage && currentImage.style.backgroundImage) {
   setTimeout(() => {
         backgroundImage.style.backgroundImage = currentImage.style.backgroundImage;
   }, transitionDuration / 1.5);
}
   const nextDelay = animationDuration - transitionDuration;

currentIndex = (currentIndex + 1) % images.length;
setTimeout(showNextImage, nextDelay);
}
function startSlideshow() {
setTimeout(() => {
   const firstImage = document.getElementById(images.id);
   if (firstImage) {
         firstImage.style.zIndex = 10;
         firstImage.classList.add(images.animation);
         requestAnimationFrame(() => {
            firstImage.style.opacity = 1;
         });
   }
   setTimeout(showNextImage, animationDuration - transitionDuration);
}, 100);
}
window.addEventListener('unload', () => {
if (animationFrameId) {
   cancelAnimationFrame(animationFrameId);
}
});
initImages();
initVideo();
</script>

云端漫步 发表于 2025-9-24 15:32:41

特效音画代码包括七个创意转场。百叶窗效果、像素化溶解效果、立体翻转效果、波浪擦拭效果、
光线泄漏效果、页面卷曲效果、缩放淡入效果，随着音乐节奏循环往复。

玫の玫 发表于 2025-9-24 18:59:56

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

玫の玫 发表于 2025-9-24 19:05:10

特效效果美美哒，女子的灵动姿态与时钟、年份数字相衬，让 “时光飞逝” 的主题更具视觉冲击力，也更易引发人们对时光的思考。

玫の玫 发表于 2025-9-24 19:05:38

整体画面色彩绚丽，充满动感，仿佛在生动展现时光流逝的迅疾与活力。{:1_154:}

绿蔷薇 发表于 2025-9-24 19:21:42

好有时尚感的设计制作，七个创意转场流畅自然，图意与特效非常彰显了时光飞逝的主题意境~~~

绿蔷薇 发表于 2025-9-24 19:23:11

漫步老师制作的棒棒哒，辛苦了，谢谢带来的精彩 ~~~{:5_130:}

绿蔷薇 发表于 2025-9-24 19:23:56

祝漫步老师创作愉快，秋日安康~~~{:1_153:}

欧阳风刀 发表于 2025-9-24 20:52:21

时尚的设计，色彩搭配漂亮，图片转页效果精彩！

欧阳风刀 发表于 2025-9-24 20:52:56

欣赏学习。感谢漫步兄精心制作分享！:handshake

页: [1] 2

查看完整版本: 【漫步特效】时光飞逝