安静听雨2016 发表于 2024-8-24 15:16

【静。单图】百万雄师过大江

<style>
        #papa { --width: 1200px; margin: 130px 0 30px calc(50% - (var(--width) / 2 + 0px)); width: var(--width); height: 800px; background: url('http://qslt.net/data/attachment/forum/202408/23/214706h7ks7ruf5sv57sum.jpg') no-repeat center/cover; z-index: 1; overflow: hidden; box-shadow: 3px 3px 8px #666; position: relative; }
        #txtbox { position: absolute; right: 360px; top: 500px; width: 650px; min-height: 120px; padding: 10px 20px; box-sizing: border-box; overflow: hidden;writing-mode:vertical-rl; letter-spacing: 3px;}
        #txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 30px/36px sans-serif; color:Orange; txtAr-shadow: 1px 1px 1px gray; animation: 2s forwards; }
       
        #player { position: absolute; left: calc(50% - 180px); top: -560px; width: 0px; height: 0px; background: linear-gradient(Gold,        Orange) repeat-y center/3% 4%, linear-gradient(to right,Gold,        Orange) repeat-x center/4% 3%; border: thick double; border-color: Gold         Orange; border-radius: 50%; cursor: pointer; animation: rot 6s linear infinite var(--state); }
#player::before, #player::after { position: absolute; content: ''; opacity: 0.3;}
#player::before { inset: 0; background: inherit; transform: rotate(45deg); }
#player::after { inset: 136px; background: url('https://642303.freep.cn/642303/za/ooo.png') no-repeat 50%/96%; border-radius: 50%; opacity: 0.99;}

        .vid { position: absolute; width: 100%; height: 50%; object-fit: cover; pointer-events: none; }
        .vid:nth-of-type(1) { position: absolute; width: 1200px; height: 800px; left:50px;top:20px;object-fit: cover;border-radius: 50%;opacity: 0.95; pointer-events: none;mix-blend-mode: screen;transform: rotateY(180deg); }
        .vid:nth-of-type(2) { height: 100%; top: 0; mix-blend-mode: screen;opacity: 0.3; }
        .tMid, .tRight { display: inline-block; width: 100%; }
        .tMid { text-align: center; }
        .tRight { text-align: right; font-size: 18px; }
        @keyframes move { to { transform: translate(0); } }
        @keyframes rot { to { transform: rotate(360deg);} }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1965603749" autoplay loop></audio>
        <div id="txtbox"></div>
        <video class="vid" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.mp4" autoplay loop muted></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/49/5b442a61122a2.mp4" autoplay loop muted></video>
        <div id="player" titel="播放/暂停"></div>
</div>

<script>
var vids = papa.querySelectorAll('.vid');
var txtAr = [
        `<span><strong>《七律 人民解放军占领南京》</strong></span><br><br>\n
钟山风雨起苍黄，\n百万雄师过大江。 \n 虎踞龙盘今胜昔，\n天翻地覆慨而慷。 \n宜将剩勇追穷寇，\n不可沽名学霸王。 \n 天若有情天亦老， \n 人间正道是沧桑。\n<span class="tRight">    —— 【现代】毛泽东</span>`
];
var curIdx = 0;
var paras = [];
var ww = txtbox.offsetWidth;

var addPs = () => {
        var txtstr = txtAr;
        txtbox.innerHTML = '';
        paras.length = 0;
        var ar = txtstr.split(/\n/).filter(item => item !=='');
        ar.forEach((p,k) => {
                var para = document.createElement('p');
                para.innerHTML = p;
                para.style.cssText += `transform: translate(${ww}px);`;
                txtbox.appendChild(para);
                paras.push(para);
        });
        curIdx = (curIdx + 1) % txtAr.length;
        mkAni();
};

var parasReset = () => {
        addPs();
        paras.forEach(p => {
                p.style.animationName = '';
                p.style.transform = 'translate(${ww}px)';
                setTimeout( () => { paras.style.animationName = 'move'; }, 500);
        });
};

var mkAni = () => {
        paras.forEach((p,k) => {
                p.onanimationend = () => {
                        paras[(k+1) % paras.length].style.animationName = 'move';
                        if(k === paras.length - 1) setTimeout( () => parasReset(), 10000);
                };
        });
};

var mState = () => {
   player.style.setProperty('--state',['running','paused'][+aud.paused]);
        [...paras,...].forEach(p => p.style.animationPlayState = aud.paused ? 'paused' : 'running');
        vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
        player.title = ['暂停', '播放'][+aud.paused];
       

};

aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();

addPs();
paras.style.animationName = 'rot';

</script>

么念 发表于 2024-8-26 14:00

欣赏学习，制作辛苦了！

安静听雨2016 发表于 2024-8-27 00:00

么念 发表于 2024-8-26 14:00
欣赏学习，制作辛苦了！

多谢支持，祝新周愉快。

诺北 发表于 2024-9-23 09:49

这音乐有气势
页: [1]
查看完整版本: 【静。单图】百万雄师过大江