漫途

马黑黑 · 发表于 2023-7-15 18:35

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

漫途

马黑黑 · 发表于 2023-7-15 18:36

代码

<style>
#mydiv {
margin: 0 0 0 calc(50% - 593px);
position: relative;
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t23/webp1/mjtu.webp') no-repeat center/cover;
box-shadow: 0 0 8px 0 #000;
}
#pan {
position: absolute;
left: 50%;
transform: translate(-50%, 50px);
width: 120px;
height: 120px;
background: lightgreen;
border-radius: 50%;
color: lightgreen;
font: bold 40px/120px sans-serif;
text-align: center;
text-shadow: 1px 1px 1px black;
cursor: pointer;
animation: borderChg 1s infinite alternate linear var(--state);
}
@keyframes borderChg {
from { box-shadow: 0 0 10px black inset, 0 0 20px green; }
to { box-shadow: 0 0 30px black inset, 0 0 30px black; }
}
</style>
<div id="mydiv">
<div id="pan">漫途</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29130912" autoplay="autoplay" loop="loop"></audio>
<script>
let total = 50, canMove = true;
class Lizi {
constructor(pa) {
this.pa = pa;
this.ele = document.createElement('span');
this.prop = {
width: 20,
height: 20,
left: 20,
top: 20,
a: 1,
step: .2,
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 / 2 + (this.pa.offsetWidth / 2 - this.prop.width / 2) * Math.cos(this.prop.a * Math.PI / 180) - this.prop.width * 0.5;
this.prop.y = this.pa.offsetHeight / 2 + (this.pa.offsetHeight / 2 - this.prop.height / 2) * Math.sin(this.prop.a * Math.PI / 180)- this.prop.height * 0.5;
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) : (mydiv.style.setProperty('--state','running'), canMove = true);
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
pan.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>