老当益壮老梦头。。。。。
<style>
#mama { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 700px; background: black url('https://pic.imgdb.cn/item/673fea7cd29ded1a8c8bcc03.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=63705"></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/07/99/5d14a4c43ed46.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-22 13:29 编辑
东篱朋友，您的厚礼我收到了，我非常感激。在东篱朋友的笔下，俺似乎又年轻了半个多世纪。老梦头在这里给您行大礼了。这份礼物不仅让我感到无比的珍贵，也让我感受到了您的真诚和友情。她不仅仅是一份礼物，更是一份深厚的情谊，我非常珍惜我们的友谊，我将永远珍藏东篱朋友的美意与真情。再次真诚地谢谢您的关爱和心意。祝您健康长寿、快乐一生。
https://1813.img.pp.sohu.com.cn/images/blog/2012/1/3/18/17/u101088321_13562109945g215.gif
梦油 发表于 2024-11-22 11:29
东篱朋友，您的厚礼我收到了，我非常感激。在东篱朋友的笔下，俺似乎又年轻了半个世纪。老梦头在这里给您行 ...
要不咱说你老当益壮呢，这力度行吧。。。。{:5_117:} 东篱闲人 发表于 2024-11-22 12:50
要不咱说你老当益壮呢，这力度行吧。。。。
行，行！和你在一起越活越年轻。 哈哈，梦油老师在东篱老师的音画中显得年轻又活力四射！赞，赞！{:4_189:}{:4_199:} 梦江南 发表于 2024-11-22 14:51
哈哈，梦油老师在东篱老师的音画中显得年轻又活力四射！赞，赞！
是啊，梦油返老还童啦。{:5_117:} 梦油 发表于 2024-11-22 15:01
是啊，梦油返老还童啦。
东篱老师真厉害。{:4_173:} 梦江南 发表于 2024-11-22 15:03
东篱老师真厉害。
东篱朋友真是多才多艺。 这个锻炼很到位啊，怪不得梦油打油那么灵，是平日锻炼带来的耳聪目明、精力充沛呢，锻炼真的太重要了{:4_187:} 东篱大哥的帖子真好，帖子里的梦油精气神太足了{:4_199:} 梦江南 发表于 2024-11-22 15:03
东篱老师真厉害。
显得宝刀不老。。。。{:4_181:} 红影 发表于 2024-11-22 19:43
东篱大哥的帖子真好，帖子里的梦油精气神太足了
18岁，18岁，参军到部队。。。{:5_117:} 做得真好，体现了梦老哥的精气神！ 樵歌 发表于 2024-11-22 19:50
做得真好，体现了梦老哥的精气神！
就是个精神！{:5_116:} 东篱闲人 发表于 2024-11-22 19:52
就是个精神！
是的人活一口气。 东篱闲人 发表于 2024-11-22 19:47
18岁，18岁，参军到部队。。。
永远的十八岁，这状态太好了{:4_187:} 老头 动图做的漂亮的，可惜音乐看不到 小辣椒 发表于 2024-11-23 12:55
老头 动图做的漂亮的，可惜音乐看不到
师傅这么客气。。。。{:5_117:} 东篱闲人 发表于 2024-11-23 13:22
师傅这么客气。。。。
哈哈哈~~错了一个字，笑s了
{:4_170:}{:4_189:}{:4_205:}{:4_205:}{:4_172:} 小辣椒 发表于 2024-11-23 14:17
哈哈哈~~错了一个字，笑s了
师傅改的还挺快。。。{:5_117:}
页:
[1]
2