论坛 › 欢乐水吧 › 高质量音画 [css独家字幕间断出现]

亚伦影音工作室 发表于 2025-6-20 16:59

高质量音画 [css独家字幕间断出现]

本帖最后由 亚伦影音工作室 于 2025-6-22 12:56 编辑 <br /><br /><style>
#papa {
      margin: 140px-300px;
      width: 1286px;
      height: 720px;
      background:#000;
      box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;
       }

#tz { margin: 20px 0px; bottom: 0px;width: 840px; height: 300px;position: absolute;z-index:10;}
#tz::before { content: attr(data-lrc); position: absolute; bottom: 0px;margin: 0px 20px;width: 100%; height: 60px; text-align: center; font: 200 3em/1em 华文隶书; color:#880000; filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;background-image: -webkit-linear-gradient(120deg,#000078,#ff6ac6 25%,#00ff00 50%,#e6d205 55%,#2cc4e0 60%,#8b2ce0 80%,#ff0000 95%,#000);
animation: flowCss 6s infinite linear ;
   -webkit-background-size: 200% 100%; }
   .stop #tz::before{animation-play-state: paused;}
   
@keyframes flowCss {
            0% {background-position: 0 0;}
          100% {background-position: -500% 0;}
      }
   
#bt{width: 200px; overflow: hidden; color:#fff; position: absolute; left:75%;text-align: center;bottom: 2%;font-size: 15px; z-index: 19;}
#fullscreen {border-radius: 4px;position: absolute;background:#0000 ;
color:#fff;box-shadow:0px 0px 0px 1px #fff;z-index: 20;
padding: 4px 10px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 90%;top: 3%;
}

.zm{list-style: none;left: 0px;width:100%;height:720px;top:16%; position:absolute;z-index: 4;overflow:hidden;}
#e {list-style: none;width: 100%;height:100%;margin: 0px 0px;text-align: center;padding: 50px 0px;position: relative; line-height: 20px;animation: myfirst 60s 4 ;animation-delay: 4s;font: normal 2.2em/1.5em 华文行楷;color: rgb(255, 255, 255,0);transition: all .5s;filter:drop-shadow(#eee 1px 0 0)drop-shadow(#eee 0 1px 0)drop-shadow(#eee -1px 0 0) drop-shadow(#eee 0 -1px 0);}
@keyframes myfirst {0% {opacity: 1;color:#000000;transform:scale(0)}6% {opacity: 1;color: #800000;transform:scale(1)}12% {opacity: 1;color: #800000;transform:scale(1)}40%{opacity: 1;color: rgb(255, 255, 255,0);transform:scale(1) }}
.stop #e{animation-play-state: paused;}

</style>

<div id="papa">
<divclass="zm" >
<div id="Img" ><divid="e" ><divstyle="transform: scale(3);">心中刻上你的名字</div><br><div> 作词：陈伟<br>作曲：绿柳<br>演唱：祁隆<br>出品：亚伦影音工作室<br>代码独创：亚伦</div></div> </div>
</div>

<span id="fullscreen" title="屏展模式">全屏欣赏</span>
<div id="testImg" ><div id="tz" data-lrc="亚伦影音"></div></div>
<css-doodle id="mplayer">
      :doodle {z-index:80 ;
                @grid: 2 / 260px 60px;
                position: absolute;
                color: var(--color);
                bottom: 5%;left: 72%;
                --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: lightgreen; --state: paused;
      }
      /* 时间信息 : 左 */
      @nth(1) {
                @place: 10% 80%;
                :after { content: var(--ttmsg1); }
      }
      /* 控制器 */
      @nth(2) {
                @size: var(--size);
                clip-path: @shape(
                points: 360;
            r: abs.sin.tan(sin(3.5t)*1.14);
      );
                @place: 45% 35%;
                background: var(--color);
                animation: rot 6s infinite linear var(--state);
      }
      /* 时间信息 : 右 */
      @nth(3) {
                @place: 80% 80%;
                :after { content: var(--ttmsg2); }
      }
      /* 进度条 */
      @nth(4) {
                @place: 40% 80%;
                @size: 100% 2px;
                background: #bbb;
                display: grid;
                place-items: center start;
                :before {
                        content: '';
                        width: var(--prog);
                        height: 100%;
                        background: var(--color);
                }
      }
      @keyframes rot { to { transform: rotate(1turn); } }

</css-doodle>
<span id="bt">心中刻上你的名字-祁隆</span>
<div id="img" >
      <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
                </div>


</div>
<audio id="aud" src="https://img3.oldkids.cn/upload/2025/06/16/blog_260848378_20250616085048647.mp3" autoplay loop></audio>

<script>
(function() {
      let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
      let script = document.createElement('script');
      script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
      document.head.appendChild(script);
      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 mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('timeupdate', () => {
                mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
                mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
                mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
      });

      mplayer.onclick = () => {
                if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
                if(clickIdx === 2) aud.currentTime = progChg;
      }
      mplayer.onmousemove = (e) => {
                let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;
                clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
                mplayer.style.cursor = cursors;
                if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
      }
})();
</script>
<script>
(function(){
var image = document.getElementById("testImg");
var imagea = document.getElementById("img");
var imagec = document.getElementById("Img");

let mState = () => aud.paused ? (image.classList.add('stop'),imagea.classList.add('stop'),imagec.classList.add('stop')):(image.classList.remove('stop'),imagea.classList.remove('stop'),imagec.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();

</script>

<script >
var curkey = 0, lrcAr = [];
var getAr = (text) => {
    var ar = text.trim().split('\n');
    ar.sort();
    var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    ar.forEach(item => {
      let result = item.match(reg);
      let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
      lrcAr.push(.trim()]);
    });
};

aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
    if(curkey > lrcAr.length - 1) return;
    if(aud.currentTime >= lrcAr) {
      tz.dataset.lrc = lrcAr;
      curkey ++;
    }
};

var lrc = `如果今生没有和你相识
我还会不会是现在的样子
那场风花雪月的往事
是否还能将回忆淋湿
如果不是那么倔强固执
我还会不会是孤独的影子
那些山盟海誓的故事
是否还会似烟花弹指
我的心中刻上你的名字
我的手上戴着你的戒指
你却还在这里闪烁其词
终于在茫茫人海悄然走失
我的心中刻上你的名字
我的命里注定为你相思
忘掉你是一种昂贵奢侈
我情愿独守约定一生一世
如果今生没有和你相识
我还会不会是现在的样子
那场风花雪月的往事
是否还能将回忆淋湿
如果不是那么倔强固执
我还会不会是孤独的影子
那些山盟海誓的故事
是否还会似烟花弹指
我的心中刻上你的名字
我的手上戴着你的戒指
你却还在这里闪烁其词
终于在茫茫人海悄然走失
我的心中刻上你的名字
我的命里注定为你相思
忘掉你是一种昂贵奢侈
我情愿独守约定一生一世
我的心中刻上你的名字
我的手上戴着你的戒指
你却还在这里闪烁其词
终于在茫茫人海悄然走失
我的心中刻上你的名字
我的命里注定为你相思
忘掉你是一种昂贵奢侈
我情愿独守约定一生一世
我情愿独守约定一生一世
`;
getAr(lrc);

</script>
<script>
let fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
                papa.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };
</script>
<style>
.演员 {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
top:0px; left:0px;
animation: spin 24s infinite linear;
      opacity: 0;
}

.演员:nth-of-type(1) {animation-delay: 20s;
      background: url('https://img4.oldkids.cn/upload/2020/10/26/photo_20201026214635052.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(2) {animation-delay: 16s;
      background: url('https://img3.oldkids.cn/upload/2020/10/28/photo_20201028214831566.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(3) {animation-delay: 12s;
      background: url('https://img3.oldkids.cn/upload/2020/10/29/photo_20201029200413559.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(4) {animation-delay: 8s;
      background: url('https://img3.oldkids.cn/upload/2020/10/29/photo_20201029200449276.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(5) {animation-delay: 4s;
      background:url('https://img3.oldkids.cn/upload/2025/02/16/photo_0_20250216221525120.jpg')no-repeat center/cover;
      
}

.演员:nth-of-type(6) {animation-delay: 0s;
      background: url('https://img3.oldkids.cn/upload/2025/02/16/photo_0_20250216221531466.jpg')no-repeat center/cover;
      
}
.stop .演员:nth-child(1),
.stop .演员:nth-child(2),
.stop .演员:nth-child(3),
.stop .演员:nth-child(4),
.stop .演员:nth-child(5),
.stop .演员:nth-child(6){animation-play-state: paused;}
@keyframes spin {
      0% { opacity: 0; transform: scale(1); }
      10% { opacity: 1; transform: scale(1); } 20% { opacity: 1;transform: scale(2);}25% { opacity: 0;transform: scale(4);}
}
</style>

红影 发表于 2025-6-20 19:22

漂亮的图片轮播效果和字幕显现方式。
制作漂亮，歌曲也好听，闪动的歌曲也好看。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2025-6-20 19:52

视听盛宴，谢谢亚伦老师精彩分享{:4_191:}

小文 发表于 2025-6-20 20:48

喜欢！

老谟深虑 发表于 2025-6-21 18:01

          欣赏老师的精美音画，好制作！

查看完整版本: 高质量音画 [css独家字幕间断出现]