叙拉古人

马黑黑 发表于 2026-6-20 11:10

马黑黑 发表于 2026-6-20 11:11

帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/gia.webp') no-repeat center/cover; color: white; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
.pd-vid { mix-blend-mode: screen; opacity: 1; }
.circle { fill: url(#grd); opacity: 0; transition: 0.5s; animation: draw 0.5s var(--delay) forwards; }
#msvg { position: absolute; width: 12vw; heighht: 12vw; bottom: 10%; transition: .75s; opacity: 1; border-radius: 50%; cursor: pointer; }
@keyframes draw { to { opacity: 1; } }
</style>

<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/17/5e1c8604a11da.mp4" autoplay loop muted></video>
<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
   <title>播放/暂停(Alt+X)</title>
   <defs>
         <radialGradient id="grd" cx="0.25" cy="0.25" r="0.25">
            <stop offset="5%" stop-color="red"></stop>
            <stop offset="30%" stop-color="lightgreen"></stop>
            <stop offset="100" stop-color="darkred"></stop>
         </radialGradient>
   </defs>
   <g id="g1"></g>
</svg>
</div>

<script>
var options = {
   pa: '.pa',
   urls: [['https://music.163.com/song/media/outer/url?id=1996524565', '叙拉古人']],
   btns: ,
};

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
   loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
});

function tzRun() {
   var aud = new AudPlayer(options);
   var dr = _dr(msvg);
   var points1 = dr.circlePoints(12, 200, 170), points2 = dr.circlePoints(6, 200, 50);
   points1.forEach((p, k) => dr.circle(p, p, 25).sets({class: 'circle', style: `--delay: ${0.5*k}s`}).addTo(g1));
   points2.forEach((p, k) => dr.circle(p, p, 20).sets({class: 'circle', style: `--delay: ${(k+12)*0.5}s`}).addTo(g1));
   dr.elm.onanimationend = () => g1.classList.add('rot');
}

function loadJs(url, callback) {
   var script = document.createElement('script');
   script.charset = 'utf-8';
   script.src = url;
   script.onload = function() {
         if (callback) callback();
   };
   document.head.appendChild(script);
}
</script>

马黑黑 发表于 2026-6-20 11:18

辅助小播与什么果 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! 介绍的绘制方法有所不同。这里：

先使用 circlePoints 获取两组不同绘制半径的外切圆圆心坐标，然后批量绘制两组小圆球（代码 41~43）；

接着使用 opacity 做小球依次绘制的动画效果（代码分别在 07、09、42 和 43、44行[监听最后一个小圆球动画执行完毕]）。

马黑黑 发表于 2026-6-20 11:20

叙拉古是位于泰拉大陆中部的国家，临近莱塔尼亚和拉特兰，原为莱塔尼亚属地，后独立出来，现由几大帮派支配政权。叙拉古地区一直生活着大群的被称作“狼群”的鲁珀兽亲。这些兽群长期借助广袤的森林与叙拉古地区的人类争斗，一直到足以砍伐树木的金属器具普及后，叙拉古人才足以形成稳定的文明。叙拉古地区的第一座城市由家族建立。

红影发表于 2026-6-20 11:21

一个个点亮的漂亮的小珠子小播，真漂亮{:4_187:}

马黑黑 发表于 2026-6-20 11:23

红影发表于 2026-6-20 11:21
一个个点亮的漂亮的小珠子小播，真漂亮

周末嚎！上午嚎！

红影发表于 2026-6-20 11:24

马黑黑发表于 2026-6-20 11:18
辅助小播与什么果 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! 介绍的绘制方法有所不同。这里：

...

怪不得，原来是这样绘制的，开始以为还是昨天的绘制方式，看点亮次序时觉得有点迷糊。现在知道了，谢谢黑黑的详细解说{:4_187:}

马黑黑 发表于 2026-6-20 11:27

红影发表于 2026-6-20 11:24
怪不得，原来是这样绘制的，开始以为还是昨天的绘制方式，看点亮次序时觉得有点迷糊。现在知道了，谢谢黑 ...

用 opacity 属性做动画，性能消耗低、容易掌控，是很多大佬都推荐的首选方法

梦江南 发表于 2026-6-20 12:26

黑黑老师的这些紫檀珠是做小播的，漂亮哦！{:4_187:}

马黑黑 发表于 2026-6-20 18:29

梦江南发表于 2026-6-20 12:26
黑黑老师的这些紫檀珠是做小播的，漂亮哦！

谢赞

杨帆发表于 2026-6-20 21:44

富有新意，创意十足，谢谢马老师深度分享{:4_190:}

红影发表于 2026-6-20 22:48

马黑黑发表于 2026-6-20 11:23
周末嚎！上午嚎！

还没咋样就嚎了两遍了{:4_170:}

红影发表于 2026-6-20 22:48

马黑黑发表于 2026-6-20 11:27
用 opacity 属性做动画，性能消耗低、容易掌控，是很多大佬都推荐的首选方法

这样的设想很巧妙{:4_204:}

马黑黑 发表于 2026-6-20 22:56

红影发表于 2026-6-20 22:48
这样的设想很巧妙

还行吧

马黑黑 发表于 2026-6-20 22:56

红影发表于 2026-6-20 22:48
还没咋样就嚎了两遍了

嚎嚎更快乐

马黑黑 发表于 2026-6-20 22:56

杨帆发表于 2026-6-20 21:44
富有新意，创意十足，谢谢马老师深度分享

{:4_180:}

红影发表于 2026-6-21 19:59

马黑黑发表于 2026-6-20 22:56
还行吧

简单而高效。

红影发表于 2026-6-21 19:59

马黑黑发表于 2026-6-20 22:56
嚎嚎更快乐

我记得你上次说的是嚎嚎更健康啊{:4_173:}

马黑黑 发表于 2026-6-21 20:00

红影发表于 2026-6-21 19:59
我记得你上次说的是嚎嚎更健康啊

健康和快乐不矛盾

红影发表于 2026-6-21 21:26

马黑黑发表于 2026-6-21 20:00
健康和快乐不矛盾

好吧，嚎的作用还挺大的呢{:4_173:}

页: [1] 2 3 4

花潮论坛's Archiver

叙拉古人