有声有色 发表于 2023-5-27 07:27

试做滚动字幕——越剧祭塔


<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1890477">
<style>
#papa {
        margin: 80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://pic1.imgdb.cn/item/647010c8f024cca173ae9cfb.gif') no-repeat center/cover;
        box-shadow: 0 0 8px #000;
        position: relative;
        z-index: 1;
        --state: paused;
}
css-doodle { position: absolute; }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 50%; transform: translate(-50%); bottom: 6px; font: bold 2.4em sans-serif; color: hsl(0, 100%, 28%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(60, 100%, 50%, .95)); z-index: 99; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(5, 100%, 14%, .45), hsla(15, 100%, 66%, .6), hsla(60, 100%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
.mypic { position: absolute;left: 0px;bottom: 0px;}
</style>

<div id="papa">
       <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
        <css-doodle grid="6" id="mplayer">
                :doodle {
                        @size: 60px;
                        @shape: circle;
                        right: 10px;
                        top: 10px;
                        cursor: pointer;
                        z-index: 2;
                        background: snow url('https://pic2.imgdb.cn/item/645b41080d2dde57775316df.png') no-repeat center/cover;
                        animation: rot 6s infinite linear forwards var(--state);
                }
                @keyframes rot { to { transform: rotate(360deg); } }
        </css-doodle>
        <css-doodle grid="20">
                :doodle {
                        @size: 1024px 640px;
                }
                position: absolute;
                left: @r(100)%;
                top: -20%;
                :after {
                        position: absolute;
                        content: "@p()";
                        color: snow;
                        font-size: @r(3, 30)px;
                }
                animation: fall @r(25,50)s @r(-20, 20)s infinite var(--state);
                @keyframes fall {
                        0% { top: -20%; transform: rotate(0deg); }
                        100% {top: 120%; transform: rotate(@p(360, 720)deg); }
                }
        </css-doodle>
        <audio id="aud" src="https://www.joy127.com/url/105176.mp3" autoplay loop></audio>
<img class="mypic" src="https://pic1.imgdb.cn/item/64700d28f024cca173a910c9.gif" alt="" />
</div>

<script>
(function(){
        let script = document.createElement('script');
        script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
        document.head.appendChild(script);
let mKey = 0, mFlag = true;
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), papa.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'), papa.style.setProperty('--state', 'running'));
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
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);};
aud.addEventListener('timeupdate', () => {for(let j = 0; j < lrcAr.length; j ++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
       
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
       aud.addEventListener('seeked', () => calcKey());
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script></td></tr></table>

红影 发表于 2023-5-27 09:03

其实这个有歌词同步，滚动字幕倒是不需要的呢{:4_173:}

红影 发表于 2023-5-27 09:06

底图跟上一个帖子一样的吧，上面配置了不同的人物和布景。有声有色老师总能找到合适的人物，应该又是从视频里截图再抠图的吧，真不容易{:4_187:}

红影 发表于 2023-5-27 09:07

这个唱段也好听，感谢有声有色老师带来这么多戏曲经典{:4_199:}{:4_187:}

有声有色 发表于 2023-5-27 09:48

红影 发表于 2023-5-27 09:03
其实这个有歌词同步，滚动字幕倒是不需要的呢

是的，我主要试试PS滚动字幕再音画上能否使用

有声有色 发表于 2023-5-27 09:50

红影 发表于 2023-5-27 09:06
底图跟上一个帖子一样的吧，上面配置了不同的人物和布景。有声有色老师总能找到合适的人物，应该又是从视频 ...

是的，反正做的与名称比较相互的图片吧

红影 发表于 2023-5-27 13:26

有声有色 发表于 2023-5-27 09:48
是的，我主要试试PS滚动字幕再音画上能否使用

哦，是用PS做的啊，还以为代码呢，这个代码也能做的呢{:4_173:}

红影 发表于 2023-5-27 13:27

有声有色 发表于 2023-5-27 09:50
是的，反正做的与名称比较相互的图片吧

很不错，等于相同的舞台可以上演不同的剧目{:4_199:}

梦缘 发表于 2023-5-27 16:38

感谢有声有色老师带来这么多戏曲经典{:4_187:}

有声有色 发表于 2023-5-28 07:59

红影 发表于 2023-5-27 13:26
哦，是用PS做的啊，还以为代码呢，这个代码也能做的呢

是吗 我没看到过。

有声有色 发表于 2023-5-28 07:59

梦缘 发表于 2023-5-27 16:38
感谢有声有色老师带来这么多戏曲经典

谢谢鼓励与支持

红影 发表于 2023-5-28 13:24

有声有色 发表于 2023-5-28 07:59
是吗 我没看到过。

之前这里的就有，我想不起在哪个帖子里了。
页: [1]
查看完整版本: 试做滚动字幕——越剧祭塔