马黑黑 发表于 2023-7-2 20:19
差远了
这个太谦虚了吧。{:4_173:}
红影 发表于 2023-7-2 21:07
这个太谦虚了吧。
必须的
马黑黑 发表于 2023-7-2 22:16
必须的
我发现这会又把体育老师拉出来了，体育老师真累。{:4_173:}
红影 发表于 2023-7-2 22:24
我发现这会又把体育老师拉出来了，体育老师真累。
应该的
马黑黑 发表于 2023-7-2 22:25
应该的
体育老师都是被你害的。{:4_170:}
红影 发表于 2023-7-2 22:31
体育老师都是被你害的。
和我木有关系呀，这是现实问题
鱼儿 发表于 2023-7-2 17:58
都这个时候了，估计今天没戏了
啊啊啊哈哈，尖叫一下，刚发现真的出了六集……
南无月 发表于 2023-7-2 23:12
啊啊啊哈哈，尖叫一下，刚发现真的出了六集……
我刚说完两分钟，就定档播出了{:4_189:}
马黑黑 发表于 2023-7-2 13:12
会懂得的
等懂等懂等等懂
马黑黑 发表于 2023-7-2 13:13
@keyframes 定义的动画带名字，哪个元素用它，带上正确的名字就行
昨天做海底那个贴子，粒子里一个MOVE，还有一个也有一个MOVE，两个打架了，就把其中一对改成MOVE1，居然解决 了。。。{:4_170:}
南无月 发表于 2023-7-3 08:48
昨天做海底那个贴子，粒子里一个MOVE，还有一个也有一个MOVE，两个打架了，就把其中一对改成MOVE1，居然 ...
名字不能雷同的。班里有两个小黑黑，得给他们加前缀或后缀，直接给他们改名当然也可以。
马黑黑 发表于 2023-7-2 13:13
完全可以
翻了记录才知道是调整线性渐变的角度，这个有机会得试试
南无月 发表于 2023-7-3 08:46
等懂等懂等等懂
{:4_199:}
鱼儿 发表于 2023-7-3 00:14
我刚说完两分钟，就定档播出了
后面才知道是六点的事儿。。。这几家视频在出牌，看谁压得过谁。。。。你空降，我也降。。{:4_170:}
鱼儿 发表于 2023-7-3 00:14
我刚说完两分钟，就定档播出了
我昨晚回来太迟，没忍住看了一集。。等会去补。。
你是不是又看完四集才睡{:4_173:}
好象近期新剧很多，看不过来了。。我补闪耀的她还没补完，长风渡也只看了一半多。。。。。
马黑黑 发表于 2023-7-3 08:50
名字不能雷同的。班里有两个小黑黑，得给他们加前缀或后缀，直接给他们改名当然也可以。
试了相同的动态就不正常了，它们乱认。。
以后知道了，碰到有需要的就直接改名。。。。
马黑黑 发表于 2023-7-1 19:20
代码
--deg: 30deg; --xx: -200px;
这个设置没看懂。
在JS里--deg: ${50 - Math.ceil(Math.random() * 100)}deg; 也就是50到-50里变化的吧，开始设置的--deg: 30deg; 派什么用途？
--xx: -${300 + Math.ceil(Math.random() * 600)}px;貌似从-330到-900里变化的，那开始的-200是做什么的？而且bottom: 80px;哦，这个好像没什么关联，那个--xx是指后面移动的量。
其实是想试试让那条鱼儿转45度，鱼儿好转，然后粒子不知道怎么转了，貌似x和角度也必须跟着转，乱试了一下，弄成这样：
<style>
#mydiv {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 600px;
background: linear-gradient(to right top, rgba(100,0,0,.65), rgba(0,0,0,.7));
overflow: hidden;
position: relative;
--state: paused;
}
#mplayer {
position: absolute;
left: 30%;
bottom: 2px;
transform: translate(-40%) rotate(135deg);
font: normal 80px / 80px sans-serif;
cursor: pointer;
z-index: 999;
}
li-zi {
display: block;
position: absolute;
left: 35%;
bottom: 80px;
width: 20px;
height: 20px;
background: snow;
border-radius: 50%;
animation: move 10s var(--delay) infinite ease-out var(--state);
--deg: 30deg; --xx: -200px; --yy: 100px; --delay: 0;
}
@keyframes move {
from { transform: rotate(0deg) translateY(0px) translateX(0px); opacity: 1; }
to { transform: rotate(var(--deg)) translateY(var(--xx)) translateX(var(--yy)); opacity: 0; }
}
</style>
<div id="mydiv">
<div id="mplayer">🐟</div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/03/21/643a94bf79472c834963eb68ee8a42ed.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
(function (){
let total = 30;
let createLizi = (mum,sons) => {
Array.from({length: sons}).forEach( (s,k) => {
let xx = 6 + Math.ceil(Math.random() * 20);
s = document.createElement('li-zi');
s.style.cssText += `
width: ${xx}px;
height: ${xx}px;
left: calc(35% - ${xx / 2}px);
--deg: ${95 - Math.ceil(Math.random() * 100)}deg;
--xx: -${300 + Math.ceil(Math.random() * 600)}px;
--yy: ${150 + Math.ceil(Math.random() * 300)}px;
--delay: -${Math.random() * 9}s;
`;
mum.appendChild(s);
});
};
createLizi(mydiv,total);
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);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<style>
#mydiv {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 600px;
background: linear-gradient(to right top, rgba(100,0,0,.65), rgba(0,0,0,.7));
overflow: hidden;
position: relative;
--state: paused;
}
#mplayer {
position: absolute;
left: 30%;
bottom: 2px;
transform: translate(-40%) rotate(135deg);
font: normal 80px / 80px sans-serif;
cursor: pointer;
z-index: 999;
}
li-zi {
display: block;
position: absolute;
left: 35%;
bottom: 80px;
width: 20px;
height: 20px;
background: snow;
border-radius: 50%;
animation: move 10s var(--delay) infinite ease-out var(--state);
--deg: 30deg; --xx: -200px; --yy: 100px; --delay: 0;
}
@keyframes move {
from { transform: rotate(0deg) translateY(0px) translateX(0px); opacity: 1; }
to { transform: rotate(var(--deg)) translateY(var(--xx)) translateX(var(--yy)); opacity: 0; }
}
</style>
<div id="mydiv">
<div id="mplayer">🐟</div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/03/21/643a94bf79472c834963eb68ee8a42ed.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
(function (){
let total = 30;
let createLizi = (mum,sons) => {
Array.from({length: sons}).forEach( (s,k) => {
let xx = 6 + Math.ceil(Math.random() * 20);
s = document.createElement('li-zi');
s.style.cssText += `
width: ${xx}px;
height: ${xx}px;
left: calc(35% - ${xx / 2}px);
--deg: ${95 - Math.ceil(Math.random() * 100)}deg;
--xx: -${300 + Math.ceil(Math.random() * 600)}px;
--yy: ${150 + Math.ceil(Math.random() * 300)}px;
--delay: -${Math.random() * 9}s;
`;
mum.appendChild(s);
});
};
createLizi(mydiv,total);
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);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>