论坛 › 欢乐水吧 › 独家代码视频转场设计《听一听耳边的风》

亚伦影音工作室 发表于 2026-5-3 18:41

独家代码视频转场设计《听一听耳边的风》

本帖最后由 亚伦影音工作室 于 2026-5-4 13:08 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#mydiv {
    margin: 0px -300px;
      display: grid;
      
      width: 1186px;
      height: 640px;
      background-color: #333;
      
      overflow: hidden;
      position: relative;
      z-index: 1;--state: running;
}


.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
}

.vid{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;object-fit: cover; pointer-events: none;

display: block;
}


#overlay {
position: absolute;
top: -60px;
left: 0;
width: 100%;
height: calc(100% + 80px);
object-fit: cover;
mix-blend-mode: overlay;
opacity: 0.0;
z-index: 50;
pointer-events: none;
}

/* 添加模糊糊到清晰效果样式 */
.blur-to-clear-effect {
animation: blurToClear 1.5s ease-out forwards var(--state);
}

@keyframes blurToClear {
from {
    filter: blur(20px);
    opacity: 0;
}
to {
    filter: blur(0);
    opacity: 1;
}
}
#xiaobo {z-index: 100;
      width: 350px;
      height: 220px;cursor: pointer;
      margin: 120px 20px;
      position: absolute;
      overflow: hidden;
      
      }
.hexahedron {width: 210px;border: 2px solid #555;
      height: 210px;
      margin: 0px 0px;
         position: relative;
      background:url(https://pic1.imgdb.cn/item/69f6d4a598d7db9e97813aeb.png)no-repeat -120px 0px/cover;
      border-radius: 12px;mask: radial-gradient(circle at 98% 50%,transparent 40px,#red 0%);-webkit-mask: radial-gradient(circle at 98% 50%,transparent 40px,red 0%); }


#cp { position: relative; top: 0px; left: 0px;width: 200px; height: 200px;transition: 6s;animation:opentop 0.5s linear 1s ;background:repeating-radial-gradient(#000, #000 8px, #444 9px);border-radius: 50%;box-shadow:0px 0px 0px 1px #aaa,0px 0px 0px 4px #555;}
.overlay {z-index: 1;
content: '';
left: 0px;
top: 0px;
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(-45deg, transparent, 35%, rgba(224,255,255,0.35),65%,transparent);
border-radius: 50%;
}


.inner {z-index: 2;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
box-shadow:0px 0px 0px 1px #333,0px 0px 0px 2px #aaa;

background:#5a4532 url()no-repeat center/cover;
border-radius: 50%;
}
.inner::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: #aa2;
border-radius: 50%;
}

#all {position: absolute;width:200px; height:200px;top: 7px; left: 110px;z-index: -1; transition: 2s; animation:tion3s linear 1.5s infinite}
@keyframes opentop { 0% {transform: translatex(-50px);} 100% { transform:rotateX(0px);}}
@keyframes tion { 0% {} 100% { transform:rotate(360deg) } }
#smsvg{ z-index: 10;position: relative;
    left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.lrc{z-index: 20;
    width: 620px;bottom:10px; left:25%;
    height: 150px;
    overflow: hidden;
    display: block;position: absolute;
    }

#lrc { --motion: cover2; --tt: 1s; --bg: linear-gradient(90deg,#e56420, #c22525, #3d9c31, #37bbde, #000080,#ff0000) ; position: absolute;bottom: 60px; left: 50%; text-align: center;transform: translateX(-50%);font: 300 3em "Ma Shan Zheng","SimHei", "Arial", "sans-serif"; color:#000080; white-space: pre; -webkit-background-clip: text; filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0); pointer-events: none; z-index: 100;}
      #lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg);background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }

</style>

<div id="mydiv">
<div class="slide">
    <video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/43deb40092b57ba9bcd27c584c7b49e9_preview.mp4" loop muted autoplay=""></video>
</div>
<div class="slide">
    <video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c1972caa86dd1b74b4db2253d98c5614_preview.mp4" loop muted autoplay=""></video>
</div>
<div class="slide">
   <video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/98197721139e61f32d8d9f2cec628053_preview.mp4" loop muted autoplay=""></video>
</div>
<div class="slide">
   <video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4177c647558d2739e6b6d06f4cf7771c_preview.mp4" loop muted autoplay=""></video>
</div>
    <div class="slide">
      <video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6c098757b3f1cf3d52dbac7ea87ee056_preview.mp4" loop muted autoplay=""></video>
      </div>
      <div class="slide">
      <video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/a6fc28f10c6c4e661d72f4c1169c2583_preview.mp4" loop muted autoplay=""></video>
      </div>
<audio id="aud" src="https://img2.oldkids.cn/upload/2026/05/03/blog_260855907_20260503181720529.mp3"loopautoplay ></audio>

<div id="xiaobo">
<div class="hexahedron"></div>
<div id="all">
<divid="cp" ><div class="inner"><svgid="smsvg"width="200px" height="200px">
        <defs>
                <path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/>
        </defs>
        <text dx="77" dy="77" font-size="12" fill="#00ff00"font-family="'楷体'">
                <textPath href="#path" textLength="535"> 花潮论坛 亚伦影音工作室 </textPath>
        </text>
</svg>
</div> <div class="overlay"></div>
</div>
</div>
</div>
<divclass="lrc">
<div id="lrc" data-lrc=""></div>
</div>

</div>

<script>
mState = () => {xiaobo.style.setProperty('--state', aud.paused ?'paused' : 'running');};

xiaobo.onclick = () => aud.paused ? (aud.play(),all.style.left = '110px',all.style.animationPlayState = 'running'):(aud.pause(),all.style.left = '30px',all.style.animationPlayState = 'paused');

(function() {
      const vids = document.querySelectorAll('.vid');
      var mState = () => {
         vids.forEach(vid => aud.paused ? vid.pause(): vid.play() );
      };
aud.onplaying = aud.onpause = () => mState();
})();


</script>
<script>
let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
let timer;

// 只保留模糊到清晰效果
const effects = [
{func: applyBlurToClearEffect}   
];

function init() {
const firstSlide = slides;
effects.func(firstSlide); // 始终使用第一个效果（模糊到清晰）
startTimer();
}

// 清除所有效果
function clearEffects() {
// 移除所有可能的效果类
slides.forEach(slide => {
    slide.style.opacity = '0';
    slide.classList.remove('blur-to-clear-effect');
});
}

function showNext() {if(!aud.paused){
clearEffects();
currentIndex = (currentIndex + 1) % totalSlides;
const currentEffect = effects; // 始终使用第一个效果（模糊到清晰）

const targetSlide = slides;
currentEffect.func(targetSlide);
resetTimer();
}
}

// 模糊到清晰效果
function applyBlurToClearEffect(slide) {
slide.style.opacity = '1';
slide.classList.add('blur-to-clear-effect');
}

function startTimer() {
timer = setInterval(showNext, 8000);
}

function resetTimer() {
clearInterval(timer);
startTimer();
}

window.onload = init;
</script>
<script >
(function() {
let gc=`放慢脚步 听一听耳边的风
制作人：亚伦
词：吴忧 曲：吴忧
出品方：亚伦影音
出品人：亚伦
代码独家设计：亚伦
【未经著作权人许可不得翻唱翻录或使用】
放慢脚步 听一听耳边的风
半生光阴 轻的就像一场梦
不争不求 也不问人海匆匆
只想贪恋 此刻眼底的晴空
推开门窗 迎一抹夕阳的红
就让喧嚣 都留在烟雨之中
几分淡泊 换来一路的从容
烟火人间 且行且望且随风
就让岁月开成一朵花
人生啊又何处不芳华
任凭光阴流转
年轮又添笔画
爱在时光中轻轻发芽
就让岁月开成一朵花
等一场春风温柔抵达
带着知足上路
带着晚霞回家
爱在时光中轻轻发芽
推开门窗 迎一抹夕阳的红
就让喧嚣 都留在烟雨之中
几分淡泊 换来一路的从容
烟火人间 且行且望且随风
就让岁月开成一朵花
人生啊又何处不芳华
任凭光阴流转
年轮又添笔画
爱在时光中轻轻发芽
就让岁月开成一朵花
等一场春风温柔抵达
带着知足上路
带着晚霞回家
爱在时光中轻轻发芽
爱在时光中轻轻发芽

`;

let mKey = 0, mFlag = true, averAdd = 0.3;

let lrcTime = (ar) => {
        let tmpAr = [];
        for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
        }
        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
        });
        return ar;
};


let getLrcAr = (text) => {
        let lrcAr = [];
        let calcRule = ;
        for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                                for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a - b);
        return(lrcTime(lrcAr));
};

let showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};
let toMin = (val) => {
        if (!val) return '00:00';
        val = Math.floor(val);
        let min = parseInt(val / 60),
        sec = parseFloat(val % 60);
        if (min < 10) min = '0' + min;
        if (sec < 10) sec = '0' + sec;
        return min + ':' + sec;
}

let calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
               
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (aud.currentTime - lrcAr);
       
        showLrc(time);
};

let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});

aud.addEventListener('pause', () => mState());/**/
aud.addEventListener('play', () => mState());/**/
aud.addEventListener('seeked', () => calcKey());/**/
let lrcAr = getLrcAr(gc); /**/

})();
</script>

红影 发表于 2026-5-3 18:50

淡入淡出的视频切换真漂亮。
欣赏亚伦老师好帖{:4_199:}

梦油 发表于 2026-5-3 20:00

欣赏佳作，问候亚伦。

杨帆 发表于 2026-5-4 13:58

切换顺畅，效果漂亮，祝亚伦老师节日快乐{:4_176:}

查看完整版本: 独家代码视频转场设计《听一听耳边的风》