论坛 › 欢乐水吧 › 心雨(改编新唱)-杨小玉[仿抖音特效]

亚伦影音工作室 发表于 2026-8-8 17:09

心雨(改编新唱)-杨小玉[仿抖音特效]

本帖最后由 亚伦影音工作室 于 2026-8-21 21:48 编辑 <br /><br /><style>
@import url("https://fonts.googleapis.com/css?family=Righteous");

#papa {position: relative;display: grid;place-items: center;margin: 30px 0;width: 1260px;height: 720px;left: calc(50% - 81px);transform: translateX(-50%);box-shadow: 3px 3px 6px gray;overflow: hidden;z-index: 10000;font-family:sans-serif;--state: running; }
      #intro {margin: 0px0px;z-index:1;
      width: 100%;
      height:100%;
      position: absolute;
background:conic-gradient(red, yellow, green, cyan, blue, magenta, red);
background-size: cover;
opacity:1;
animation: hue-rotate 6s linear infinite var(--state);
}
@keyframes hue-rotate {
0%{
   filter: hue-rotate(-360deg);
}

100%{
   filter: hue-rotate(360deg);
}
}
#tu{position:absolute;z-index: 4;
      width: 100%;
      height: 100%;
      opacity: 0;filter:hue-rotate(0deg)contrast(180%)brightness(100%);
-webkit-mask-image: radial-gradient(black 25% ,transparent 85%);
animation:cover30s linear infinite var(--state);
         bottom: 0px;
left:0%;
}
@keyframes cover{0% {opacity: 0; transform: scale(1);}
        10% {opacity: 1;transform: scale(1);}
        22% {opacity: 1;transform: scale(1);}
        24% {opacity: 0; transform: scale(6);}
        }
#tu:nth-child(1) {background:url(https://pic1.imgdb.cn/item/6a043d8b6f6a2d474b49f2a1.png)no-repeat center/cover;
animation-delay: 24s;
}
#tu:nth-child(2) {background:url(https://pan.29o.cn/view.php/bf0a2cbe50086b1889a9069ad264c363.png)no-repeat center/cover;
animation-delay: 18s;
}
#tu:nth-child(3) {background:url(https://pic1.imgdb.cn/item/69f6c2facbb7e6da3529c275.png)no-repeat center/cover;
animation-delay: 12s;
}
#tu:nth-child(4) {background:url(https://pic1.imgdb.cn/i/60A2HEXOrtjujKD6HCpe8D.jpg)no-repeat center/cover;
animation-delay: 6s;
}
#tu:nth-child(5) {background:url(https://pic1.imgdb.cn/item/6a3f509b2546dff76d1b3edd.png)no-repeat center/cover;
animation-delay: 0s;
}



#dt{position:absolute;z-index: 5;
      width: 100%;
      height: 100%;mix-blend-mode: lighten;
      background:url(https://image.hnol.net/c/2026-08/07/19/202608071933034661-5769293.gif)no-repeat center/cover;
         bottom: 0px;
left:0%;
}
#bfq{position: absolute;
width: 250px;
height: 250px;top:55%; left:5%;z-index: 114;transform:scale(0.6);}
#cd{top:40px; left:0px;z-index: 5;
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background:url('https://pic.imgdb.cn/item/6430f89c0d2dde57770c848e.png')no-repeat center/cover;
animation: spin 10s infinite linear var(--state);}
@keyframes spin {100% { transform: rotate(360deg); }
}

#mplayer {z-index: 6;
        position: absolute;
        left: 0;
        bottom: 0px;
        width: 250px;
        height: 250px;
opacity: 1;
        transition: 0.5s;
       
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before , #mplayer::after{
        position: absolute;
        content: '';
cursor: pointer;
        transition: 0.5s;
}
#mplayer::before {
        width: 250px;
        height: 250px;opacity: 1;
        background:url(https://pic.imgdb.cn/item/65f5104b9f345e8d03c1d60f.png)no-repeat center/cover;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 250px;
        height: 250px;opacity: 1;
        background:url(https://pic.imgdb.cn/item/65f5103d9f345e8d03c17eca.png)no-repeat center/cover;
        opacity: var(--disp2);
}

#tmsg {position: absolute;z-index: 2;
      font: normal 18px sans-serif;
      color: #ffffff;
         top:100%;
      left:24%;}
#prog {position: absolute; display: grid; place-items: center; width: 215px; height: 215px; right: 42px; bottom: 3px;border-radius: 10%;-webkit-mask: radial-gradient( transparent 68%, #000 68%, #000 0);cursor: #333; z-index: 6;}

#wrapper {
                position: absolute;
                padding: 0px;
                  font-family: 'Righteous', serif;
font-size: 3em;
                filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0)hue-rotate(20deg)contrast(250%)brightness(120%);
white-space: pre;transform: translateX(0%);text-align: center;
      width:100%;height:10%;left: 0%;z-index: 20;
                top:80%;white-space: nowrap;
        }
        .char {
                display: inline-block;
                padding: 0px 4px;
                opacity: 0;
                transform: translate(var(--x), var(--y));
                animation: fadeIn 1.5s var(--delay) forwards var(--state),flash 0.5s linear infinite var(--state);
        }
       
        @keyframes fadeIn {0% {
          opacity: 1; transform: scale(0);
          }
        50% {
          opacity: 1;
          transform: scale(1.1,1);
        }
        100% {
          opacity: 1; transform: scale(1.1,1);
           }
        }
        @keyframes flash {
                100% {filter: hue-rotate(360deg);}

        }


#fullscreen { opacity:1;position: absolute; width: 20px; height: 20px;   bottom:26px; cursor: pointer;right:1%;z-index: 40;filter:invert(0%);}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 20px; height: 20px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 20px; height: 20px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="papa">
<div><div id="tu"></div><div id="tu"></div><div id="tu"></div><div id="tu"></div><div id="tu"></div></div>
<div id="intro"></div>
<div id="dt"></div>
<div id="bfq"><div id="tmsg">00:00 | 00:00</div>
<div id="cd" ></div>
<divid="prog"></div>
<div id="mplayer"></div>
</div>

<div id="wrapper"></div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>

<audio id="aud"src="https://www.djdvd.com/plug/down.php?ac=music&lk=mp3&id=646d4e33646e4e6b646d356a" loop autoplay ></audio>
</div>
<script>
(function(){
mplayer.onclick = () => aud.paused ?(aud.play(),mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'),dt.style.opacity = '1'):(aud.pause(),mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'),dt.style.opacity = '0' );
let mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}
/*进度条 进度时间*/

prog.onclick = (e) => { let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
                deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
                aud.currentTime = aud.duration * deg / 360;
                }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background = 'conic-gradient(from -2deg,#1E90FF,#1E90FF,#1E90FF ' + aud.currentTime / aud.duration * 100 + '%, #808000 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
                });




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;
      };
/*结束*/


const gc = `心雨(改编新唱)-杨小玉
作词：刘振美
作曲：马兆骏
出品：亚伦影音工作室
我的思念
是不可触摸的网
我的思念
不再是决堤的海
为什么总在
那些飘雨的日子
深深的把你想起
我的心是六月的情
沥沥下着心雨
想你想你想你
最后一次想你
因为明天
我将成为别人的新娘
让我最后一次想你
我的思念
是不可触摸的网
我的思念
不再是决堤的海
为什么总在那些飘雨的日子
深深的把你想起
我的心是六月的情
沥沥下着心雨
想你想你想你
最后一次想你
因为明天
我将成为别人的新娘
让我最后一次想你
我的思念
是不可触摸的网
我的思念
不再是决堤的海
为什么总在那些飘雨的日子
深深的把你想起
深深的把你想起
`;

const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
aud.onended = () => {
curkey = 0;
aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr ? lrcAr : ;
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (aud.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
if (curkey < 0) curkey = 0;
if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
let time = gcAr?. ?? 0 - gcAr;
isSeeking = false;
showLrc(gcAr, wrapper, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.innerHTML = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? 0 : 0);
const y = Math.random() * (Math.random() > 0.5 ? 0 : 0);
span.style.cssText += `
color: #${Math.random().toString(11).substring(2,8)};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}      
      </script>

亚伦影音工作室 发表于 2026-8-8 17:09

心雨(改编新唱)-杨小玉
作词：刘振美
作曲：马兆骏
我的思念
是不可触摸的网
我的思念
不再是决堤的海
为什么总在
那些飘雨的日子
深深的把你想起
我的心是六月的情
沥沥下着心雨
想你想你想你
最后一次想你
因为明天
我将成为别人的新娘
让我最后一次想你
我的思念
是不可触摸的网
我的思念
不再是决堤的海
为什么总在那些飘雨的日子
深深的把你想起
我的心是六月的情
沥沥下着心雨
想你想你想你
最后一次想你
因为明天
我将成为别人的新娘
让我最后一次想你
我的思念
是不可触摸的网
我的思念
不再是决堤的海
为什么总在那些飘雨的日子
深深的把你想起
深深的把你想起

梦油 发表于 2026-8-8 19:55

亚伦影音工作室 发表于 2026-8-8 17:09
心雨(改编新唱)-杨小玉
作词：刘振美
作曲：马兆骏


欣赏佳作，问好亚伦。

红影 发表于 2026-8-8 21:43

这个制作和前面一个差不多啊，只是轮播图片多了好多个，非常漂亮。
欣赏亚伦老师好帖{:4_199:}

玫瑰 发表于 2026-8-8 22:06

创意十足，赞一个

玫瑰 发表于 2026-8-8 22:06

创意十足，赞一个

玫瑰 发表于 2026-8-8 22:06

创意十足，赞一个

小辣椒 发表于 2026-8-9 21:34

欣赏亚纶精彩的制作{:4_187:}

杨帆 发表于 2026-8-9 23:42

“仿抖音特效”是什么意思呀？谢谢亚伦老师精彩分享~

小九 发表于 2026-8-10 08:24

经典的歌曲，经典的回忆，适合在秋天听！{:4_187:}

查看完整版本: 心雨(改编新唱)-杨小玉[仿抖音特效]