时间都到哪里去了（学习黑黑老师的时间机器播放器代码）
本帖最后由 梦江南 于 2024-11-21 08:06 编辑 <br /><br /><style>#mama { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 700px; background: black url('https://pic.imgdb.cn/item/673d93add29ded1a8cb98915.png') no-repeat center/ 1200px 700px; box-shadow: 3px 3px 6px gray; z-index: 1; display: grid; place-items: center; position: relative; --run: running; }
#mama::after { position: absolute; content: 'Time Machine'; background: #eee; border-radius: 0 12px 12px 0; left: 87%; top: 3%; width: 150px; height: 40px;object-fit:display: grid; place-items:}
#msvg { position: absolute; top: calc(60% - 100px); width: 150px; height: 150px; left: 765px;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;left: 665px;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=29932457"></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/87/5b4cd7b5225e1_10s_big.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 = 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', 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> https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 起个网名好难 发表于 2024-11-21 08:31
问好老师，谢谢欣赏支持。{:4_204:} 欣赏佳作，问候梦江南。 梦油 发表于 2024-11-21 09:14
欣赏佳作，问候梦江南。
问好梦油老师，谢谢支持。{:4_204:} 这个构思好，时间都去哪了，用一只苍老的手和拐杖，对应着一只怀表，意味着时间的流逝{:4_199:} 这首歌也特别喜欢，很感人的歌曲。在江南营造的氛围里，听着这样的歌，很感动。
欣赏江南好帖{:4_199:} 视频也选得特别好，和小播下的图图相互呼应，那个文字遮挡也用得恰到好处{:4_199:} 好制作，欣赏咯~~{:4_204:} 红影 发表于 2024-11-21 09:47
这个构思好，时间都去哪了，用一只苍老的手和拐杖，对应着一只怀表，意味着时间的流逝
问好影子，谢谢欣赏支持。{:4_204:} 红影 发表于 2024-11-21 09:49
这首歌也特别喜欢，很感人的歌曲。在江南营造的氛围里，听着这样的歌，很感动。
欣赏江南好帖
这歌有一段时间很红的。听着这歌真的有点泪目。{:4_187:} 红影 发表于 2024-11-21 09:51
视频也选得特别好，和小播下的图图相互呼应，那个文字遮挡也用得恰到好处
黑黑老师的这个白条子正好用来遮住熊猫办公的字样。{:4_173:} 朵拉 发表于 2024-11-21 09:58
好制作，欣赏咯~~
问好朵拉老师，谢谢欣赏支持。{:4_204:} 欣赏江南老师好制作{:4_187:} 冬天的雨 发表于 2024-11-21 16:41
欣赏江南老师好制作
问好冬雨老师，谢谢欣赏支持！晚上好！{:4_204:} 轮转的岁月，转老了苍老的手！好创意呵 梦江南 发表于 2024-11-21 11:29
问好影子，谢谢欣赏支持。
这个制作特别好，给江南点赞{:4_187:} 梦江南 发表于 2024-11-21 11:32
这歌有一段时间很红的。听着这歌真的有点泪目。
是啊，父母为了孩子付出了一切，不知不觉就老去了。 梦江南 发表于 2024-11-21 11:35
黑黑老师的这个白条子正好用来遮住熊猫办公的字样。
江南自己移动的，而且挺到位的{:4_187:} 樵歌 发表于 2024-11-21 20:10
轮转的岁月，转老了苍老的手！好创意呵
问好樵歌老师，谢谢支持。{:4_190:}