快乐阿拉蕾（学习黑师《纸飞机》飞翔效果）
<style>#mydiv {margin: 0 0 0 calc(50% - 720px);
width:1300px;
height: 768px;
background: url('https://s1.ax1x.com/2023/07/11/pCWZMJU.jpg') no-repeat center / cover;
overflow: hidden;
cursor: pointer;
position: relative;
}
li-zi {
position: absolute;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%, 15% 50%);
z-index: 3;
}
#vid {
position: absolute;
width: 1300px;
height: 50%;
top:1px;
right:2px;
border-radius: 2%;
opacity: .35;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
}</style> <div id="mydiv"><video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/10/5e17dd5a329bf.mp4" autoplay="" loop="" muted=""></video></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=290840" autoplay="autoplay" loop="loop"></audio> <script>//粒子运动开关
let canMove = true;
//Lizi 类
class Lizi {
//构造函数 : 属性设计/设置（pa - 粒子宿主元素）
constructor(pa) {
this.pa = pa;
this.size = {x: 20, y: 20};
this.pos = {x: 10, y: 10}
this.step = {x: 1, y: 1};
this.ele = document.createElement('li-zi');
};
//创建粒子
creating() {
this.ele.style.cssText = `
width: ${this.size.x}px;
height: ${this.size.y}px;
left: ${this.pos.x}px;
top: ${this.pos.y}px;
`;
this.pa.appendChild(this.ele);
this.chgColor();
this.moving();
};
//移动粒子
moving() {
if(canMove) {
this.pos.x += this.step.x;
this.pos.y += this.step.y;
if(this.pos.x >= this.pa.offsetWidth) {
this.pos.x = -this.size.x;
this.chgColor();
}
if(this.pos.y >= this.pa.offsetHeight) {
this.pos.y = -this.size.y;
this.chgColor();
}
this.ele.style.left = this.pos.x + 'px';
}
requestAnimationFrame(this.moving.bind(this));
};
//变换颜色
chgColor() {
this.ele.style.background = '#' + Math.random().toString(16).substr(-6);
};
}
//实例化类
Array.from({length: 20}).forEach((element) => {
element = new Lizi(mydiv);
element.size = {
x: 40 + Math.random() * 40,
y: 10 + Math.random() * 30
};
element.pos = {
x: Math.floor(Math.random() * (mydiv.offsetWidth - element.size.x)),
y: Math.floor(Math.random() * (mydiv.offsetHeight - element.size.y-500))
};
element.step = {
x: 0.5 + Math.random(),
y: 0.2 + Math.random() * 0.2
};
element.creating();
});
mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'),vid.pause(),canMove = false) : (mydiv.style.setProperty('--state','running'), vid.play(),canMove =true );
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
//mydiv.onclick = () => canMove = !canMove;
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();</script>
月月好制作，这个小飞机我自己修改过，但出来是一个尺寸，你厉害呢，不止一个尺寸的{:4_199:} 暑期也要去补习班补课么 小辣椒 发表于 2023-7-12 22:05
月月好制作，这个小飞机我自己修改过，但出来是一个尺寸，你厉害呢，不止一个尺寸的
这也是黑大神教程里直接拿来用的，他设的跟气球一样大小随机{:4_170:} 马黑黑 发表于 2023-7-12 22:06
暑期也要去补习班补课么
分明是田野里玩耍{:4_170:} 南无月 发表于 2023-7-12 22:10
分明是田野里玩耍
那干嘛要背个狗狗书包 马黑黑 发表于 2023-7-12 22:11
那干嘛要背个狗狗书包
那个是小熊挂件 醉美水芙蓉 发表于 2023-7-12 22:13
图图好可爱！
配纸飞机找的童趣力图片 南无月 发表于 2023-7-12 22:18
那个是小熊挂件
额，不是书包就好 马黑黑 发表于 2023-7-12 22:19
额，不是书包就好
可能是零食包 南无月 发表于 2023-7-12 22:20
可能是零食包
额？那更好 马黑黑 发表于 2023-7-12 22:23
额？那更好
老师是同情现在的孩子太卷了是吧{:4_170:} 南无月 发表于 2023-7-12 22:25
老师是同情现在的孩子太卷了是吧
不是同情不同情的问题。大量的作业，其实没多大必要 马黑黑 发表于 2023-7-12 22:28
不是同情不同情的问题。大量的作业，其实没多大必要
这么难的教材，更是没必要。。。已经很卷了，极可怕。。。{:4_170:} 南无月 发表于 2023-7-12 22:35
这么难的教材，更是没必要。。。已经很卷了，极可怕。。。
教育讲究快乐 马黑黑 发表于 2023-7-12 22:49
教育讲究快乐
孩子天生是快乐的。。。顺应天性自然就快乐 南无月 发表于 2023-7-12 22:59
孩子天生是快乐的。。。顺应天性自然就快乐
作业多就不顺应天然 一颗童心，努力前行。送给小盆友们最好节目哈{:4_431:} 月儿厉害，把那小飞机设计成只在上半部分。整个画面也很童趣，非常赞{:4_199:}