自然之道（学习黑师《漫途》多个粒子弧形运动效果）
<style>#mydiv {
margin: 0 0 0 calc(50% - 593px);
position: relative;
width: 1024px;
height: 640px;
overflow: hidden;
background: url('https://pic.imgdb.cn/item/64b2b6271ddac507ccb574e5.jpg') no-repeat center/cover;
box-shadow: 0 0 8px 0 #000;
}
#pan {
position: absolute;
left: 19%;
transform: translate(-50%, 50px);
width: 90px;
height: 90px;
background: OrangeRed;
border-radius: 50%;
color: DarkOrange;
font: bold 5px/20px sans-serif;
text-align: center;
text-shadow: 1px 1px 1px black;
cursor: pointer;
z-index: 18;
animation: borderChg 1s infinite alternate linear var(--state);
}
@keyframes borderChg {
from { box-shadow: 0 0 30px Gold inset, 0 0 30px OrangeRed; }
to { box-shadow: 0 0 30px Orange inset, 0 0 40px Gold; }
}
#vid {
position: absolute;
width: 1024px;
height: 160%;
top:-380px;
opacity: .10;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 10;
}
.panda {
position: absolute;
width: 1024px;
height: 640px;
z-index: 9;
}</style><div id="mydiv"> <div id="pan"></div> <div class="panda"><img src="https://pic.imgdb.cn/item/64b2b5991ddac507ccb2ac8b.png" alt="" /></div> <video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/08/37/5d2089aad8e40.mp4" autoplay="" loop="" muted=""></video></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=501214984" autoplay="autoplay" loop="loop"></audio><script>let total = 26, canMove = true;
class Lizi {
constructor(pa) {
this.pa = pa;
this.ele = document.createElement('span');
this.prop = {
width: 32,
height: 32,
left: 20,
top: 20,
a: 1,
step: 0.6,
bgstr: 'purple'
};
}
create() {
this.ele.style.cssText = `
position: absolute;
width: ${this.prop.width}px;
height: ${this.prop.height}px;
left: ${this.prop.left}px;
top: ${this.prop.top}px;
border-radius: 50%;
background: ${this.prop.bgstr};
`;
this.pa.appendChild(this.ele);
this.circle();
}
circle() {
if(canMove) {
this.prop.a = this.prop.a + this.prop.step;
this.prop.x = this.pa.offsetWidth / 3 + (this.pa.offsetWidth / 3 - this.prop.width / 2) * Math.cos(this.prop.a * Math.PI / 180) - this.prop.width * 0.5 + 160;
this.prop.y = this.pa.offsetHeight / 6 + (this.pa.offsetHeight / 6 - this.prop.height / 2) * Math.sin(this.prop.a * Math.PI / 180)- this.prop.height * 0.5 + 180;
this.ele.style.cssText += `
left: ${this.prop.x}px;
top: ${this.prop.y}px;
`;
}
requestAnimationFrame(this.circle.bind(this));
}
}
Array.from({length: total}).forEach((item,key) => {
item = new Lizi(mydiv);
item.prop.a = 360 / total * key;
item.prop.bgstr = `#${Math.random().toString(16).substr(-6)}`;
item.create();
});
let mState = () =>aud.paused ? (mydiv.style.setProperty('--state','paused'), canMove = false, vid.pause()) : (mydiv.style.setProperty('--state','running'), canMove = true, vid.play());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
pan.onclick = () => aud.paused ? aud.play() : aud.pause();</script> @马黑黑 艾特一下老师。交份作业{:4_173:} 月儿真聪明，原来是这样让珠子走到人物身后的{:4_173:}
这个人物是黑黑那个帖子里的图图吧{:4_187:} 这个太棒了，还加了光线效果，看着更圣洁了{:4_199:} 比你师傅的更加魔幻了！厉害了！ 南无月 发表于 2023-7-16 13:40
@马黑黑 艾特一下老师。交份作业
这是玩呼啦圈锻炼身体的样纸{:4_170:} 好喜欢，先收藏下来。问好！ 红影 发表于 2023-7-16 14:41
月儿真聪明，原来是这样让珠子走到人物身后的
这个人物是黑黑那个帖子里的图图吧
这个小处理是障眼法{:4_170:}
看着圈转得不合心意乱想出来的。。。
那个人物刚好在练功，就拿来用了 红影 发表于 2023-7-16 14:42
这个太棒了，还加了光线效果，看着更圣洁了
感觉练得有点象气功{:4_170:} 醉美水芙蓉 发表于 2023-7-16 16:40
月儿太棒了！做得不错！
水芙蓉晚上好，感谢鼓励，完成新作业的……{:4_173:} 樵歌 发表于 2023-7-16 18:28
比你师傅的更加魔幻了！厉害了！
是更接地气儿{:4_173:} 马黑黑 发表于 2023-7-16 18:55
这是玩呼啦圈锻炼身体的样纸
{:4_170:}就是这么个意思，好不容易才套上 小文 发表于 2023-7-16 20:18
好喜欢，先收藏下来。问好！
问好，感谢临贴支持{:4_187:} 南无月 发表于 2023-7-16 20:53
就是这么个意思，好不容易才套上
技术好 马黑黑 发表于 2023-7-16 20:54
技术好
老师教得好{:4_170:}{:4_190:} 南无月 发表于 2023-7-16 21:04
老师教得好
哪里哪里？是你自己的功劳 马黑黑 发表于 2023-7-16 21:33
哪里哪里？是你自己的功劳
赏六毛……好久没见发钱贴了{:4_173:} 南无月 发表于 2023-7-16 21:58
赏六毛……好久没见发钱贴了
都忘记发福利了 南无月 发表于 2023-7-16 20:49
这个小处理是障眼法
看着圈转得不合心意乱想出来的。。。
那个人物刚好在练功，就拿来用了
哈哈，这个构思奇妙{:4_199:}