亚伦影音工作室 发表于 2024-1-11 17:31

影视首屏字幕设计【重复2次可调可控】

本帖最后由 亚伦影音工作室 于 2025-5-5 15:07 编辑 <br /><br /><style type="text/css">#papa {margin: 150px -300px;
        width: 1168px;
        height: 640px;
background:#000000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/4c378446738578038a522d60c655e8a4.jpg)no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;       
}
#mplayer {z-index: 80;
        position: absolute;
        top:94%; left:50%;
        bottom: 20px;
        width: 40px;
        height: 35px;background:#333333;
        border: 0px solid #000000;
        border-radius: 10%;
        opacity: 1;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #ffffff;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 16px;
        border-width: 5px 8px;
        border-color: transparent transparent transparent #ffffff;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 15px;
        border-width: 0 2px 0 2px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }

#rotate-words {text-align:center;
position:absolute;z-index: 2;
width:900px;height: 60px;
top:24%; left:0%;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
color:#ff0000;
font:bolder 6em 微软雅黑;
}
#rotate-words div {
position:absolute;
opacity:0;
overflow:hidden;
left:0;
width:80vw;
animation: rotate-word 36s linear 2 ;
}

@keyframes rotate-word {
    0% { opacity: 1;transform: translateX(0);filter:blur(10px);transform:scale(1.4)}
    3% { opacity: 1;transform: translateX(0);filter:blur(0px);transform:scale(.6)}
    12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
    16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.4)}
    80% { opacity: 0}
    100% { opacity: 0}
}

#rotate-words div:nth-child(2) { animation-delay: 6s}
#rotate-words div:nth-child(3) { animation-delay: 12s}
#rotate-words div:nth-child(4) { animation-delay: 18s}
#rotate-words div:nth-child(5) { animation-delay: 24s}
#rotate-words div:nth-child(6) { animation-delay: 30s}

.stop #rotate-words div:nth-child(2),
.stop #rotate-words div:nth-child(3),
.stop #rotate-words div:nth-child(4),
.stop #rotate-words div:nth-child(5),
.stop #rotate-words div:nth-child(6){animation-play-state: paused;}

#musickrc{width:100%;line-height:0px;position: absolute;position: absolute;left:0%;top:85%;z-index: 11;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);}
#musickrc span {display:block;text-align:center; }
</style>
<div id="papa">

<div id="testImg" >
<div id="rotate-words">
<div>牵手</div>

<div>演唱：小阿枫</div>

<div>词：李子恒</div>

<div>曲：李子恒</div>

<div>出品：亚伦影音工作室</div>

<div>音画设计：亚伦</div>
</div>
</div>
<div id="mplayer"></div>
<divid="musickrc" >
<p id="musickrc01"style="color:#880000; text-align:center;font-weight: ;font-family:华文隶书;font-size: 50px;" ></P>
<P id="musickrc02"style="color:#000080;text-align:right;font-weight: ;font-family:华文隶书;font-size: 0px;"></P>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/b2/69/63/67de1f26637fc541b8a39812e378e692/audio.mp3" loop autoplay></audio>
</div>

<script>
var songkrc =`
因为爱着你的爱
因为梦着你的梦
所以悲伤着你的悲伤
幸福着你的幸福
因为路过你的路
因为苦过你的苦
所以快乐着你的快乐
追逐着你的追逐
也许牵了手的手
前生不一定好走
也许有了伴的路
今生还要更忙碌
所以牵了手的手
来生还要一起走
所以有了伴的路
没有岁月可回头
因为誓言不敢听
因为承诺不敢信
所以放心着你的沉默
去说服明天的命运
没有风雨躲得过
没有坎坷不必走
所以安心的牵你的手
不去想该不该回头
也许牵了手的手
前生不一定好走
也许有了伴的路
今生还要更忙碌
所以牵了手的手
来生还要一起走
所以有了伴的路
没有岁月可回头
所以有了伴的路
没有岁月可回头
`;
function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g,result = []; while (!pattern.test(lines)) {lines = lines.slice(1); }; lines.length === 0 && lines.pop(); lines.forEach(function(v,i,a) { var time = v.match(pattern), value = v.replace(pattern,''); time.forEach(function(v1,i1,a1){ var t = v1.slice(1, -1).split(/:/); result.push(,10) * 60 + parseFloat(t), value]); }); }); result.sort(function(a, b){ return a - b;}); return result;}
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML = ""; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();

(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();

var image= document.getElementById("testImg");
mplayer.onclick =function() { aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'))};
</script>

小辣椒 发表于 2024-1-11 20:27

这个界面看上去比较简洁，效果还是蛮漂亮的

庶民 发表于 2024-1-12 05:13

特色的美。

侃大山 发表于 2024-1-12 08:35

好看{:4_204:}
页: [1]
查看完整版本: 影视首屏字幕设计【重复2次可调可控】