小辣椒 发表于 2024-11-20 20:16

只谈风生不谈情 （学习套用黑黑时间机器播放器效果）

<style>
#mama { margin: 130px 0 30px calc(50% - 681px); width: 1200px; height: 700px; background: black url('https://638183.freep.cn/638183/small/time.jpg') no-repeat center/ 200px 200px; box-shadow: 3px 3px 6px gray; z-index: 1; display: grid; place-items: center; position: relative; --run: running; }
#mama::after { position: absolute; content: '学习时间机器效果'; background: #eee;top: 150px;border-radius: 0 12px 12px 0; left: 0; width: 150px; height: 40px; display: grid; place-items: center; }
#msvg { position: absolute; top: calc(53% - 100px); width: 150px; height: 150px; cursor: pointer; animation: rot 8s linear infinite var(--run); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 1%, red); pointer-events: none; }
#prog { position: absolute; bottom: 230px; width: 200px; left: 42.5%; height: 4px; 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; }

#plane1{position: absolute;left: 0px;top: 0;width: 32px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T1200 10");animation: move 8s linear infinite;}
   #plane2 {position: absolute;left: 10px;top: 0;width: 32px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T0 10");animation: move 8s linear infinite;}
   #dt1{ position: absolute; width: 32px; height: 32px; top: 45px; left: 690px; }
   #dt2{ position: absolute; width: 32px; height: 32px; top: 550px; left: 710px; z-index: 1;}
   #dt3{ position: absolute; width: 75px; height: 125px; top: 450px; left: 1010px; z-index: 1;}
   #dt4{ position: absolute; width: 75px; height: 125px; top: 450px; left: 110px; z-index: 1;}
   #dt5{ position: absolute; width: 600px; height: 100px; top: 580px; left: 300px; z-index: 1;}

      @keyframes move { to { offset-distance: 100%;} }
      @keyframes rot { to { transform: rotate(-360deg); } }
</style>

<div id="mama">
<img id="plane1" alt="" src="https://365.tf/disk/tf/1667322044.jpg" />
<img id="plane2" alt="" src="https://365.tf/disk/tf/1667322044.jpg" />   
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt=""/>
<img id="dt1" src="https://365.tf/disk/tf/1667322044.jpg" alt="" />
   <img id="dt2" src="https://365.tf/disk/tf/1667322044.jpg" alt="" />
   <img id="dt3" src="https://file.uhsea.com/2411/0268010966f043fef90c222b1f1a759208.gif" alt="" />
   <img id="dt4" src="https://file.uhsea.com/2411/0268010966f043fef90c222b1f1a759208.gif" alt="" />
   <img id="dt5" src="https://file.uhsea.com/2411/deddbb511ece1c9800db029511b1d830DF.png" alt="" />

        <audio id="aud" src="https://file.uhsea.com/2410/79064c879b5a5f31ad0bb892aa6577143H.m4a"></audio>
        <video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/e51180a3f5a8bb36831a87d9ae331269_preview.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?v=01';

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 = 75, r = 70, a = 360 / tt, rad = Math.PI / 180 * a, pstr = 'M75 75';
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)} Q75 75,${x2.toFixed(2)} ${y2.toFixed(2)} L75 75`;
}
dr.marker('m1', 2.5, 2.5, 1.25, 1.25);
dr.circle(1.25,1.25,1.25,'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-20 20:17

@马黑黑

黑黑套用玩一个，只是想看球赛了，匆匆忙忙赶一个。

小辣椒 发表于 2024-11-20 20:17

@冬天的雨

冬雨你有时间玩一个{:4_205:}

马黑黑 发表于 2024-11-20 20:19

小辣椒 发表于 2024-11-20 20:17
@马黑黑

黑黑套用玩一个，只是想看球赛了，匆匆忙忙赶一个。

{:4_199:}

梦油 发表于 2024-11-20 21:06

米业喜欢球啊？

起个网名好难 发表于 2024-11-20 21:11

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

起个网名好难 发表于 2024-11-20 21:12

评分后要刷新一下才恢复正常。

红影 发表于 2024-11-20 22:21

这背景视频好美啊，还有两个跳舞小人和那么多动态小星星。
这个太美了，欣赏亲爱的好帖{:4_199:}

小辣椒 发表于 2024-11-20 22:41

马黑黑 发表于 2024-11-20 20:19


喝茶{:4_180:}

小辣椒 发表于 2024-11-20 22:42

梦油 发表于 2024-11-20 21:06
米业喜欢球啊？

梦油，我很喜欢看球赛的，特别乒乓球，以前足球，排球都看的

小辣椒 发表于 2024-11-20 22:42

起个网名好难 发表于 2024-11-20 21:11


难难晚上好，谢谢欣赏{:4_187:}

小辣椒 发表于 2024-11-20 22:43

起个网名好难 发表于 2024-11-20 21:12
评分后要刷新一下才恢复正常。

是的，我给别人评分也是出现这个情况的

小辣椒 发表于 2024-11-20 22:43

红影 发表于 2024-11-20 22:21
这背景视频好美啊，还有两个跳舞小人和那么多动态小星星。
这个太美了，欣赏亲爱的好帖

亲爱的，谢谢鼓励和支持{:4_179:}

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

动感十足，小人儿跳{:4_189:}得好，樵哥哥喜欢，怎么木见冬小雨在上面

梦江南 发表于 2024-11-21 08:50

做得真棒！欣赏学习。{:4_187:}

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

小辣椒 发表于 2024-11-20 22:43
亲爱的，谢谢鼓励和支持

亲爱的选用的背景特别浩渺，很引人想象呢{:4_187:}

朵拉 发表于 2024-11-21 11:14

这个制作太棒了，欣赏学习{:4_178:}

梦油 发表于 2024-11-21 14:06

小辣椒 发表于 2024-11-20 22:42
梦油，我很喜欢看球赛的，特别乒乓球，以前足球，排球都看的

嘿嘿，咱们还有点共同的爱好呢。

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

小辣椒 发表于 2024-11-20 20:17
@冬天的雨

冬雨你有时间玩一个

来了，又一个只谈风生不谈情，冬雨是既谈风生又谈情{:4_170:}

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

这个播放器很漂亮，但我刚才看见马老师今天的那个源码更加简单的，{:4_170:}

这个冬雨就不做了{:4_197:}{:4_185:}
页: [1]
查看完整版本: 只谈风生不谈情 （学习套用黑黑时间机器播放器效果）