东篱闲人 发表于 2024-11-21 11:38

跟着黑黑的节奏，转起来。。。

<style>
#mama { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 700px; background: black url('https://pic.imgdb.cn/item/673ec5dad29ded1a8cb3840f.gif') no-repeat center/ 400px 400px; box-shadow: 3px 3px 6px gray; z-index: 1; display: grid; place-items: center; position: relative; --run: running; }
#mama::after { position: absolute; content: 'Rock Your Life'; background: #eee; border-radius: 12px 0 0 12px; right: 10px; top: 20px; width: 150px; height: 40px; display: grid; place-items: center; }
#msvg { position: absolute; top: calc(50% - 155px); width: 300px; height: 300px; cursor: pointer; animation: rot 8s linear infinite var(--run); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
#prog { position: absolute; bottom: 150px; width: 300px; height: 2px; background: #eee; display: grid; place-items: center; cursor: pointer; --prog: 0%; }
#prog::before { position: absolute; content: attr(data-tt); left: -50px; right: -50px; text-align:justify; text-align-last: justify; font-size: 14px; color: white; }
#prog::after { position: absolute; content: ''; left: calc(var(--prog) - 6px); width: 12px; height: 12px; border-radius: 50%; background: red; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mama">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=31890557"></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/08/01/5d14ee3d65a59.mp4" autoplay loop muted></video>
        <svg id="msvg"></svg>
        <div id="prog" data-tt="00:00 00:00"></div>
</div>

<script type="module">
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
import { Aud } from 'https://638183.freep.cn/638183/web/mod/audio.js';

var dr = draw.dr('msvg');
var mDatas = { pa: mama, aud: aud, btn: msvg, prog: prog, cssval: '--run' };

var audio = new Aud(mDatas);
audio.play();

var tt = 9, R = 150, r = 140, a = 360 / tt, rad = Math.PI / 180 * a, pstr = 'M150 150';
for(var i = 0; i <= tt; i ++) {
        var x1 = R + r * Math.cos(rad * i), x2 = R + r * Math.cos(rad * (i + 1)),
                y1 = R + r * Math.sin(rad * i), y2 = R + r * Math.sin(rad * (i + 1));
        pstr += `L${x1.toFixed(2)} ${y1.toFixed(2)} Q150 150,${x2.toFixed(2)} ${y2.toFixed(2)} L150 150`;
}
dr.marker('m1', 5, 5, 2.5, 2.5);
dr.circle(2.5,2.5,2.5,'red').addTo('m1');
dr.path(pstr, 'rgba(20,20,100,.3)', 'red', 2).sets({'marker-mid': 'url(#m1)', 'stroke-dasharray': '4 8'}).animate('animate', {
        attributeName: 'stroke-dashoffset',
        to: 300,
        dur: '4s',
        repeatCount: 'indefinite'
});
</script>

梦江南 发表于 2024-11-21 11:43

问好老师，佳作欣赏！{:4_199:}

红影 发表于 2024-11-21 15:25

哈哈，东篱大哥还有这么狂野的一面啊，这摇滚也摇得太嗨了{:4_172:}

红影 发表于 2024-11-21 15:27

那个小图标没必要放在右边，帮你移到右上去了，把更多空间留给东篱大哥摇滚吧{:4_173:}

红影 发表于 2024-11-21 15:28

这个不应该是转起来，应该说是摇起来吧。坚决支持，使劲摇啊摇{:4_170:}

红影 发表于 2024-11-21 15:29

看不出出来啊，东篱大哥平日文质彬彬的，真狂野起来这么狂野啊，点了暂停还继续跳呢{:4_189:}

东篱闲人 发表于 2024-11-21 15:33

梦江南 发表于 2024-11-21 11:43
问好老师，佳作欣赏！

{:4_190:}

东篱闲人 发表于 2024-11-21 15:33

红影 发表于 2024-11-21 15:25
哈哈，东篱大哥还有这么狂野的一面啊，这摇滚也摇得太嗨了

来手拉手，一起摇。。。。{:5_117:}

东篱闲人 发表于 2024-11-21 15:34

红影 发表于 2024-11-21 15:29
看不出出来啊，东篱大哥平日文质彬彬的，真狂野起来这么狂野啊，点了暂停还继续跳呢

停不下来，根本停不下来。。。。{:4_170:}

冬天的雨 发表于 2024-11-21 16:26

这个老头很会玩{:4_199:}

醉美水芙蓉 发表于 2024-11-21 16:46

樵歌 发表于 2024-11-21 20:11

不敢看头晕{:4_203:}

红影 发表于 2024-11-21 21:06

东篱闲人 发表于 2024-11-21 15:33
来手拉手，一起摇。。。。

没那么足的动力啊，看东篱大哥跳就好{:4_189:}

红影 发表于 2024-11-21 21:07

东篱闲人 发表于 2024-11-21 15:34
停不下来，根本停不下来。。。。

那就不用停，继续跳呗{:4_189:}

梦油 发表于 2024-11-21 21:32

好，好，转的挺好玩的。

东篱闲人 发表于 2024-11-22 09:45

红影 发表于 2024-11-21 21:06
没那么足的动力啊，看东篱大哥跳就好

一起。。。。{:5_112:}

东篱闲人 发表于 2024-11-22 09:46

梦油 发表于 2024-11-21 21:32
好，好，转的挺好玩的。

老梦也能转。。。{:5_112:}

梦油 发表于 2024-11-22 11:12

东篱闲人 发表于 2024-11-22 09:46
老梦也能转。。。

我要是转啊，那可就晕啦。{:5_153:}

东篱闲人 发表于 2024-11-22 12:51

梦油 发表于 2024-11-22 11:12
我要是转啊，那可就晕啦。

咱看转的挺好。。。{:5_106:}

梦油 发表于 2024-11-22 14:16

东篱闲人 发表于 2024-11-22 12:51
咱看转的挺好。。。

那我们就一起转。
页: [1] 2
查看完整版本: 跟着黑黑的节奏，转起来。。。