醉美水芙蓉 发表于 2023-7-8 11:37

Marnik、Hard Lights - Butterfly

本帖最后由 醉美水芙蓉 于 2023-7-8 11:37 编辑 <br /><br /><style>
#papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: tan; box-shadow: 0 0 10px gray;position: relative; display: grid; place-items: center; --state: paused; }
.vid { position: absolute; width: 1024px; height: 640px; object-fit: cover; opacity: 1; }
.mypic { position: absolute;left: 262px;top: 280px; }
.mypic1 { position: absolute;left: 460px;top: 262px; }
css-doodle { position: absolute; }
</style>

<div id="papa">
<video class="vid" src="https://video-js.51miz.com/preview/video/00/00/15/34/V-153443-20A3FA57.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<img class="mypic" src="https://pic.imgdb.cn/item/64a8c57e1ddac507cc058ccc.gif" alt="" />
<img class="mypic1" src="" alt="" />
<css-doodle grid="1x1" id="mplayer">
:doodle{ @size: 100px;left:826px;top: 530px; z-index: 40;clip-path: @shape(fill: evenodd;points: 300;
scale: .45;
x: cos(2t) + cos(π - 7t);
y: sin(2t) + sin(7t);); background: tan; cursor: pointer; background: linear-gradient(DeepSkyBlue,Crimson,MediumPurple);animation: rot 4s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }</css-doodle>
        <!-- 歌词 -->
        <css-doodle id="lrc">
                :doodle { @size: auto 4em; z-index:5; top: 20px; left:320px; --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: 1px 1px 2px #000;
                        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="https://img.tukuppt.com/video_show/2418175/00/01/41/5b42b85fa5edc.mp4" autoplay="" loop="" muted=""></video>           <audio id="aud" src="https://i.mp3.wf/view.php/229b9b072d54610b42798e264470122f.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-8 11:43

漂亮的舞蹈和播放器按钮，这首歌曲觉得挺熟悉的呢。欣赏水芙蓉美女好帖{:4_187:}

醉美水芙蓉 发表于 2023-7-8 11:45

红影 发表于 2023-7-8 11:43
漂亮的舞蹈和播放器按钮，这首歌曲觉得挺熟悉的呢。欣赏水芙蓉美女好帖

周末大家舞起来！

马黑黑 发表于 2023-7-8 11:51

菇凉身体边缘白边明显

醉美水芙蓉 发表于 2023-7-8 12:10

马黑黑 发表于 2023-7-8 11:51
菇凉身体边缘白边明显

老师说得对！

马黑黑 发表于 2023-7-8 12:24

醉美水芙蓉 发表于 2023-7-8 12:10
老师说得对！

没处理好

小文 发表于 2023-7-8 13:23

厉害！欣赏

南无月 发表于 2023-7-8 13:53

背景视频里的粒子飞舞，加上光束形成超炫的舞台效果。。。欣赏水芙蓉好贴{:4_187:}

醉美水芙蓉 发表于 2023-7-8 13:59

小文 发表于 2023-7-8 13:23
厉害！欣赏

谢谢小文支持！

醉美水芙蓉 发表于 2023-7-8 14:00

南无月 发表于 2023-7-8 13:53
背景视频里的粒子飞舞，加上光束形成超炫的舞台效果。。。欣赏水芙蓉好贴

谢谢月儿光临支持！

红影 发表于 2023-7-8 15:45

醉美水芙蓉 发表于 2023-7-8 11:45
周末大家舞起来！

这样很欢乐{:4_208:}

樵歌 发表于 2023-7-8 19:31

超级梦幻效果！

醉美水芙蓉 发表于 2023-7-8 20:39

樵歌 发表于 2023-7-8 19:31
超级梦幻效果！

樵歌周末愉快！
页: [1]
查看完整版本: Marnik、Hard Lights - Butterfly