机械
<style>@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/small/webp/jixp.webp') no-repeat center/cover; color: rgba(0,0,0,.8); }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#msvg { position: absolute; width: 12vw; heighht: 12vw; transition: .75s; opacity: 1; }
#msvg path { fill-rule: evenodd; animation: draw 6s linear forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2418175/00/02/22/5b52de8ec8111.mp4" autoplay loop muted></video>
<svg id="msvg" viewBox="-200 -200 400 400"><title>播放/暂停(Alt+X)</title></svg>
</div>
<script>
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=558035016', '机械']],
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);
const vertex1 = dr.circlePoints(26, 200, 180);
const vertex2 = dr.circlePoints(26, 200, 160);
let path = 'M';
for (let i = 0; i < vertex1.length; i++) {
const v1 = (i > 0 ? 'L' : '') + vertex1.join(',');
const v2 = (i > 0 ? 'L' : '') + vertex2.join(',');
path += i % 2 === 0 ? v1 + ' ' + v2 + ' ' : v2 + ' ' + v1 + ' ';
};
var beginPos = vertex1;
path += `L${vertex1.join(',')},120 0 A1 1,0 1 1,-120 0 A1 1,0 1 1, 120 0L${vertex1.join(',')}`;
dr.path(path, 'none', 'currentColor', 4).sets({'stroke-dasharray': dr.elm.getTotalLength(), 'stroke-dashoffset': dr.elm.getTotalLength()});
dr.elm.onanimationend = () => {
dr.elm.setAttribute('fill', 'currentColor');
dr.elm.style.animation = 'rot 8s linear infinite var(--state)';
};
}
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> <style>
@import 'https://638183.freep.cn/638183/web/css/hl.css';
#myPre { white-space: pre-wrap; }
</style>
<h3>帖子代码：</h3>
<pre id="myPre" class="hlCode"><style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/small/webp/jixp.webp') no-repeat center/cover; color: rgba(0,0,0,.8); }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#msvg { position: absolute; width: 12vw; heighht: 12vw; transition: .75s; opacity: 1; }
#msvg path { fill-rule: evenodd; animation: draw 6s linear forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2418175/00/02/22/5b52de8ec8111.mp4" autoplay loop muted></video>
<svg id="msvg" viewBox="-200 -200 400 400"><title>播放/暂停(Alt+X)</title></svg>
</div>
<script>
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=558035016', '机械']],
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);
const vertex1 = dr.circlePoints(26, 200, 180);
const vertex2 = dr.circlePoints(26, 200, 160);
let path = 'M';
for (let i = 0; i < vertex1.length; i++) {
const v1 = (i > 0 ? 'L' : '') + vertex1.join(',');
const v2 = (i > 0 ? 'L' : '') + vertex2.join(',');
path += i % 2 === 0 ? v1 + ' ' + v2 + ' ' : v2 + ' ' + v1 + ' ';
};
var beginPos = vertex1;
path += `L${vertex1.join(',')},120 0 A1 1,0 1 1,-120 0 A1 1,0 1 1, 120 0L${vertex1.join(',')}`;
dr.path(path, 'none', 'currentColor', 4).sets({'stroke-dasharray': dr.elm.getTotalLength(), 'stroke-dashoffset': dr.elm.getTotalLength()});
dr.elm.onanimationend = () => {
dr.elm.setAttribute('fill', 'currentColor');
dr.elm.style.animation = 'rot 8s linear infinite var(--state)';
};
}
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></pre> 沙发板凳{:4_174:} 精彩的分享。 玫瑰 发表于 2026-7-17 21:50
精彩的分享。
晚上嚎 玫瑰 发表于 2026-7-17 21:50
沙发板凳
都是好座位 马黑黑 发表于 2026-7-17 21:51
都是好座位
来的巧了。 喜欢这样效果，精彩的分享。 制作的精美之处，动感十足。 玫瑰 发表于 2026-7-17 21:54
制作的精美之处，动感十足。
一切都是视频的功劳 玫瑰 发表于 2026-7-17 21:53
喜欢这样效果，精彩的分享。
感谢喜欢 哇塞，一看就是真的很 机械，有造飞机，火箭 的空间感，欣赏黑黑好制作{:4_178:} 本帖最后由 玫瑰 于 2026-7-17 22:34 编辑
马黑黑 发表于 2026-7-17 21:55
感谢喜欢
欣赏学习。 小辣椒欣赏加学习{:4_187:} 给大家学习真是省力。{:4_171:} 玫瑰 发表于 2026-7-17 21:58
给大家学习真是省力。
{:4_190:} 小辣椒 发表于 2026-7-17 21:58
小辣椒欣赏加学习
这个没啥的，主要是辅助小播的绘制 很有科技感啊，小播的绘制很有趣，音乐也很有特色，好听。{:4_199:} 马老师晚上好~~在生活中很多齿轮造型带来了诗意，体现在画面中，环环相扣的动态和音乐的重复赋予了画面机械的动感，有些浑浊的水让我想到了当下的水患。水患挡不住机械的运行，我理解这是很有寓意的作品，机械以其独特的硬朗线条和强大的力量感，展现出一种霸气之美。赞佩！！
感谢分享，恭祝夏安！{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-7-17 23:30
马老师晚上好~~在生活中很多齿轮造型带来了诗意，体现在画面中，环环相扣的动态和音乐的重复赋予了画面机械 ...
你的解读富有想象力和创造力，佩服