若战
<style>@import 'https://638183.freep.cn/638183/tzmaker/tz5.css';
.pa { --bg: url('https://638183.freep.cn/638183/t24/7/rovj.jpg') no-repeat center/cover; --ma-size: 6%; }
.son { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; box-shadow: 1px 2px 4px gray; animation: move ease-in-out infinite alternate var(--state); }
@keyframes move {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}
</style>
<div class="pa"></div>
<script>
var pa = document.querySelector('.pa');
var tt = 6, sons = [];
var frg = new DocumentFragment();
for (var i = 0; i < tt; i++) {
var son = document.createElement('div');
var c1 = `#${Math.random().toString(16).substring(2,8)}`;
var c2 = `#${Math.random().toString(16).substring(2,8)}`;
son.style.background = `linear-gradient(30deg, ${c1}, ${c2})`;
son.style.animationDuration = `${6 + Math.random() * 6}s`;
son.style.animationDelay = `${-12 * Math.random()}s`;
son.className = 'son';
sons.push(son);
frg.appendChild(son);
}
pa.appendChild(frg);
loadJs('https://638183.freep.cn/638183/tzmaker/tz5.js', tzInit);
function loadJs(url, callback) {
const script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.defer = true;
script.onload = callback;
document.head.appendChild(script);
}
function tzInit() {
var tz = TZ('pa');
tz.add('audio', '', '', {
src: 'https://music.163.com/song/media/outer/url?id=1393205387'
});
tz.add('img', '', 'ma', {
src: 'https://638183.freep.cn/638183/small/dcjm.webp'
}).style('bottom: 80px;').playmp3();
tz.bgprog().style('bottom: 40px; color: #fefefe; width: 240px;');
tz.fs().style('right: 20px; top: 20px;');
tz.autoMid();
}
var resizeObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
var { width, height } = entry.contentRect;
sons.forEach((son, idx) => {
var x0 = 15, y0 = 15 + idx * 45;
var x1 = Math.floor(width / 2), y1 = Math.floor(height + y0);
var x2 = Math.floor(width - x0), y2 = y0;
son.style.offsetPath = `path('M ${x0} ${y0} Q ${x1} ${y1}, ${x2} ${y2}')`;
});
});
});
resizeObserver.observe(pa);
</script> <style>
@import 'https://638183.freep.cn/638183/web/css/hl.css';
.hlCode { background: #eee; font-size: 16px; border-radius: 14px; white-space: pre-wrap; }
</style>
<p><帖子代码</p>
<pre class="hlCode"><style>
@import 'https://638183.freep.cn/638183/tzmaker/tz5.css';
.pa { --bg: url('https://638183.freep.cn/638183/t24/7/rovj.jpg') no-repeat center/cover; --ma-size: 6%; }
.son { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; box-shadow: 1px 2px 4px gray; animation: move ease-in-out infinite alternate var(--state); }
@keyframes move {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}
</style>
<div class="pa"></div>
<script>
var pa = document.querySelector('.pa');
var tt = 6, sons = [];
var frg = new DocumentFragment();
for (var i = 0; i < tt; i++) {
var son = document.createElement('div');
var c1 = `#${Math.random().toString(16).substring(2,8)}`;
var c2 = `#${Math.random().toString(16).substring(2,8)}`;
son.style.background = `linear-gradient(30deg, ${c1}, ${c2})`;
son.style.animationDuration = `${6 + Math.random() * 6}s`;
son.style.animationDelay = `${-12 * Math.random()}s`;
son.className = 'son';
sons.push(son);
frg.appendChild(son);
}
pa.appendChild(frg);
loadJs('https://638183.freep.cn/638183/tzmaker/tz5.js', tzInit);
function loadJs(url, callback) {
const script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.defer = true;
script.onload = callback;
document.head.appendChild(script);
}
function tzInit() {
var tz = TZ('pa');
tz.add('audio', '', '', {
src: 'https://music.163.com/song/media/outer/url?id=1393205387'
});
tz.add('img', '', 'ma', {
src: 'https://638183.freep.cn/638183/small/dcjm.webp'
}).style('bottom: 80px;').playmp3();
tz.bgprog().style('bottom: 40px; color: #fefefe; width: 240px;');
tz.fs().style('right: 20px; top: 20px;');
tz.autoMid();
}
var resizeObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
var { width, height } = entry.contentRect;
sons.forEach((son, idx) => {
var x0 = 15, y0 = 15 + idx * 45;
var x1 = Math.floor(width / 2), y1 = Math.floor(height + y0);
var x2 = Math.floor(width - x0), y2 = y0;
son.style.offsetPath = `path('M ${x0} ${y0} Q ${x1} ${y1}, ${x2} ${y2}')`;
});
});
});
resizeObserver.observe(pa);
</script></pre> 小球动画实现原始和方法，请参阅：
https://www.huachaowang.com/forum.php?mod=viewthread&tid=94750
这是黑黑老师的世界。{:4_187:} 这六个小球在全屏的时候也能适配父元素尺寸，黑黑讲解之后就有实例，真好{:4_187:} 效果漂亮~谢谢马老师精彩示范{:4_190:} 杨帆 发表于 2026-7-23 15:39
效果漂亮~谢谢马老师精彩示范
感谢支持 红影 发表于 2026-7-23 14:42
这六个小球在全屏的时候也能适配父元素尺寸，黑黑讲解之后就有实例，真好
谢好 梦江南 发表于 2026-7-23 14:38
这是黑黑老师的世界。
八一节预祝帖 马黑黑 发表于 2026-7-23 22:05
谢好
不客气啊，问好黑黑{:4_187:} 小球的轨迹很舒服，赞佩！！谢老师分享~~{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-7-23 23:50
小球的轨迹很舒服，赞佩！！谢老师分享~~
下午好 红影 发表于 2026-7-23 23:24
不客气啊，问好黑黑
同问不客气 马黑黑 发表于 2026-7-24 18:28
同问不客气
不客气还需要问啊，这就应该加个标点，否则会被误解{:4_173:} 红影 发表于 2026-7-24 23:20
不客气还需要问啊，这就应该加个标点，否则会被误解
误解也是美丽的 马黑黑 发表于 2026-7-25 21:05
误解也是美丽的
没感觉美丽{:4_173:} 红影 发表于 2026-7-25 23:06
没感觉美丽
客观存在不依赖于感觉 马黑黑 发表于 2026-7-25 23:56
客观存在不依赖于感觉
好吧，那就当它美丽的吧{:4_173:} 红影 发表于 2026-7-26 21:44
好吧，那就当它美丽的吧
这就是自欺欺人了 马黑黑 发表于 2026-7-26 23:55
这就是自欺欺人了
被欺和自欺也没什么区别，如果笃信的话{:4_173:}
页:
[1]
2