有声有色 发表于 2023-7-12 07:59

十送红军


<style>
#papa {
        margin: 100px -280px;
        width: 1164px;
        height: 640px;
        box-shadow: 1px 1px 0px #000;
background:lightgreenurl('https://pic.imgdb.cn/item/64accf411ddac507cc7d22ac.gif')no-repeat center / cover; ;
        box-shadow: 0 0 8px #000;
        display: grid;
        place-items: center;
        position: relative;
        overflow: hidden;
        --state: paused;
}
#vid {
        position: absolute;
        width: 1400px;
        height: 100%;
        border-radius: 2%;
        opacity: .26;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;
}       
css-doodle { position: absolute; }

#mydiv {
        width: 1164px;
        height: 640px;
        overflow: hidden;
        position: relative;
        margin: 30px auto;
        --opa1: 0; --opa2: 1; --bgcolor: rgba(255,255,255,.6);
}

.plane {
        display: block;
        width: 80px;
        height: 60px;
        left: 20px;
        top: 30px;
        background: linear-gradient(lightgreen,green,lightgreen);
        opacity: .8;
        clip-path: polygon(0 0,20% 50%,0 100%,100% 50%);
        offset-path: path('M20 30 h1004 30');
        offset-distance: 0%;
        position: absolute;
        animation: fly 40s var(--delay) infinite linear var(--state);
        --delay: 0s;
}
.plane:nth-of-type(2),.plane:nth-of-type(4) { --delay: -10s; }
        .plane:nth-of-type(3), {
        transform: translateY(510px);
        opacity: .6;
}
@keyframes fly { to { offset-distance: 100%; } }

</style>


<div id="papa">
<!-- 播放器 -->
        <css-doodle grid="1" id="mplayer">
                :doodle { @size: 100px; cursor: pointer; right: 455px; top: 510px; opacity: .66;z-index: 4; }
                clip-path: @shape(
                        points: 18;
R: seq(.618, 1, 0);
T: seq(t-.55, t, t);
x: R * cos(T);
y: R * sin(T);
                );
                background: linear-gradient(lightgreen,green,lightgreen);
                animation: rot 6s infinite linear var(--state);
                @keyframes rot { to { transform: rotate(360deg); } }
        </css-doodle>

        <!-- 歌词 -->
        <css-doodle id="lrc">
                :doodle { @size: auto 4em; z-index:5; top:520px; left:190px; --geci: &quot; css-doodle player&quot;; --motion: cover2; --tt: 1s; }
                display: grid;
                place-items: center start;
                :before, :after {
                        content: var(--geci);
                        color: green;
                        font: bold 2em sans-serif;
                        text-shadow: 2px 2px 2px #f30e0e;
                        white-space: pre;
                }
                :after {
                        position: absolute;
                        width: 0;
                        color:SteelBlue;
                        overflow: hidden;
                        animation: var(--motion) var(--tt) linear forwards var(--state);
                }
                @keyframes cover1 { from { width: 0; } to { width: 100%; } }
                @keyframes cover2 { from { width: 0; } to { width: 100%; } }
        </css-doodle>
       <div id="mydiv"><span id="btn"></span><span class="plane"></span><span class="plane"></span><span class="plane"></span><span class="plane"></span></div><video id="vid" src="//img.tukuppt.com/video_show/130518/00/01/93/5b4dac0ae47cf.mp4" autoplay="" loop="" muted=""></video>           <audio id="aud" src="https://music.163.com/song/media/outer/url?id=76982.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>(function() {
let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];

let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
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);};
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.body.appendChild(script);
//let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), vid.pause()) : (papa.style.setProperty('--state','running'), vid.play());
let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

小文 发表于 2023-7-12 08:56

欣赏佳作

有声有色 发表于 2023-7-12 09:01

小文 发表于 2023-7-12 08:56
欣赏佳作

谢谢支持

梦油 发表于 2023-7-12 10:37

红歌勾起了我的红色的回忆，谢谢分享。

有声有色 发表于 2023-7-12 11:27

梦油 发表于 2023-7-12 10:37
红歌勾起了我的红色的回忆，谢谢分享。

谢谢支持

红影 发表于 2023-7-12 12:38

这帖子底图和视频非常适合，都很歌曲很相配。效果用红星那个应该比小飞机这个更好呢{:4_187:}

红影 发表于 2023-7-12 12:39

欣赏有声有色老师好帖，这首红歌很好听呢{:4_187:}

东篱闲人 发表于 2023-7-12 13:44

无数先烈抛头颅洒热血，消灭了剥削，消灭了压迫，消灭了贫富分化，换来了人人平等。

有声有色 发表于 2023-7-12 14:41

红影 发表于 2023-7-12 12:38
这帖子底图和视频非常适合，都很歌曲很相配。效果用红星那个应该比小飞机这个更好呢
你说的对，我去找找小红星（是播放器那个吗）

有声有色 发表于 2023-7-12 14:43

东篱闲人 发表于 2023-7-12 13:44
无数先烈抛头颅洒热血，消灭了剥削，消灭了压迫，消灭了贫富分化，换来了人人平等。

好久没见，东篱老师

梦油 发表于 2023-7-12 15:14

有声有色 发表于 2023-7-12 11:27
谢谢支持

希望经常欣赏到你贴发的红歌。

咏歌 发表于 2023-7-12 18:08

{:5_116:}

马黑黑 发表于 2023-7-12 22:11

刀郎唱的有味道。好帖，欣赏。

有声有色 发表于 2023-7-13 08:25

咏歌 发表于 2023-7-12 18:08


谢谢支持

有声有色 发表于 2023-7-13 08:25

马黑黑 发表于 2023-7-12 22:11
刀郎唱的有味道。好帖，欣赏。

谢谢支持

马黑黑 发表于 2023-7-13 13:00

有声有色 发表于 2023-7-13 08:25
谢谢支持

{:4_191:}

红影 发表于 2023-7-13 20:04

有声有色 发表于 2023-7-12 14:41
你说的对，我去找找小红星（是播放器那个吗）

是的，黑黑大概是在71的时候有个帖子用的是红星。
页: [1]
查看完整版本: 十送红军