秋日私语
<style>#papa {
margin: 30px 0 30px calc(50% - 593px);
display: grid;
place-items: center;
width: 1024px;
height: 570px;
background: url('https://638183.freep.cn/638183/t24/webp2/qrsy.webp') no-repeat center/cover;
box-shadow: 0 0 8px #333;
overflow: hidden;
position: relative;
}
li-zi {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: snow;
box-shadow: 100px 0 0 plum, 0 50px 0 lightyellow;
}
#player {
position: absolute;
width: 60px;
height: 60px;
filter: drop-shadow(0 0 1px darkgreen);
cursor: pointer;
animation: rot 8s linear infinite var(--state);
}
.leaf {
position: absolute;
left: -50%;
top: -50%;
width: 100%;
height: 100%;
background: linear-gradient(45deg, yellow, darkgreen);
border-radius: 100% 50%;
opacity: .95;
transform-origin: 100% 100%;
transform: rotate(var(--deg)) translateY(60px);
}
@keyframes moving {
from { opacity: 0; transform: ratate(0) translate(0,0) scale(0.2); }
to { opacity: 1; transform: rotate(60deg) translate(var(--x0),var(--y0)) scale(1.5); }
}
@keyframes rot { to { transform: rotate(360deg); } };
</style>
<div id="papa">
<div id="player"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=34341349" autoplay loop></audio>
</div>
<script>
mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
Array(total=5).fill('').forEach((i,k) => {
i = document.createElement('span');
i.className = 'leaf';
i.style.cssText += `--deg: ${360/total * k}deg;`;
player.appendChild(i);
});
for(var i = 0, all = 80; i < all; i++) {
let lz = document.createElement('li-zi');
let hudu = Math.PI / 180 * 360 / all * i;
let xx = 800 * Math.cos(hudu), yy = 600 * Math.sin(hudu), size = Math.ceil(Math.random() * 5 + 5);
lz.style.cssText += `
--x0: ${xx}px;
--y0: ${yy}px;
width: ${size}px;
height: ${size}px;
animation: moving ${Math.random() * 5 + 5}s -${Math.random() * 10}s linear infinite var(--state);
`;
papa.prepend(lz);
}
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#papa {
margin: 30px 0 30px calc(50% - 593px);
display: grid;
place-items: center;
width: 1024px;
height: 570px;
background: url('https://638183.freep.cn/638183/t24/webp2/qrsy.webp') no-repeat center/cover;
box-shadow: 0 0 8px #333;
overflow: hidden;
position: relative;
}
li-zi {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: snow;
box-shadow: 100px 0 0 plum, 0 50px 0 lightyellow;
}
#player {
position: absolute;
width: 60px;
height: 60px;
filter: drop-shadow(0 0 1px darkgreen);
cursor: pointer;
animation: rot 8s linear infinite var(--state);
}
.leaf {
position: absolute;
left: -50%;
top: -50%;
width: 100%;
height: 100%;
background: linear-gradient(45deg, yellow, darkgreen);
border-radius: 100% 50%;
opacity: .95;
transform-origin: 100% 100%;
transform: rotate(var(--deg)) translateY(60px);
}
@keyframes moving {
from { opacity: 0; transform: ratate(0) translate(0,0) scale(0.2); }
to { opacity: 1; transform: rotate(60deg) translate(var(--x0),var(--y0)) scale(1.5); }
}
@keyframes rot { to { transform: rotate(360deg); } };
</style>
<div id="papa">
<div id="player"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=34341349" autoplay loop></audio>
</div>
<script>
mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
Array(total=5).fill('').forEach((i,k) => {
i = document.createElement('span');
i.className = 'leaf';
i.style.cssText += `--deg: ${360/total * k}deg;`;
player.appendChild(i);
});
for(var i = 0, all = 80; i < all; i++) {
let lz = document.createElement('li-zi');
let hudu = Math.PI / 180 * 360 / all * i;
let xx = 800 * Math.cos(hudu), yy = 600 * Math.sin(hudu), size = Math.ceil(Math.random() * 5 + 5);
lz.style.cssText += `
--x0: ${xx}px;
--y0: ${yy}px;
width: ${size}px;
height: ${size}px;
animation: moving ${Math.random() * 5 + 5}s -${Math.random() * 10}s linear infinite var(--state);
`;
papa.prepend(lz);
}
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
</pre></div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>
欣赏佳作，谢谢分享！ 彩云归 发表于 2024-9-3 19:22
欣赏佳作，谢谢分享！
晚上好 醉美水芙蓉 发表于 2024-9-3 19:52
欣赏老师精彩播放器！绿色叶子漂亮！
绿黄渐变加一点点透明度 https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif 马黑黑 发表于 2024-9-3 18:18
帖子代码
<style>
li-zi 本质上是个 div ， 用作类也可以吧 起个网名好难 发表于 2024-9-3 20:23
li-zi 本质上是个 div ， 用作类也可以吧
当然可以。所有自定义标签，默认以div为蓝本。 这个作品漂亮，眉清目秀的。。 中间那朵花有点面熟，似乎是之前叶片组合起来的那串。
粒子随机色怎么年轻了许多，很轻盈的色彩。。 花飞飞 发表于 2024-9-3 20:32
粒子随机色怎么年轻了许多，很轻盈的色彩。。
粒子没有用随机色，是预设的三种颜色：一种是粒子自身，另外两种是粒子阴影 花飞飞 发表于 2024-9-3 20:30
这个作品漂亮，眉清目秀的。。
总而言之：长的简单是在而靠谱不脱离现实 马黑黑 发表于 2024-9-3 20:34
粒子没有用随机色，是预设的三种颜色：一种是粒子自身，另外两种是粒子阴影
刚看了代码，阴影有两种
，一种紫色一种黄色。。本身是白色。。
难怪这么飘逸。。 花飞飞 发表于 2024-9-3 20:38
刚看了代码，阴影有两种
，一种紫色一种黄色。。本身是白色。。
难怪这么飘逸。。
还可以加一些，不过不要贪心，阴影的渲染也是消耗资源的 马黑黑 发表于 2024-9-3 20:35
总而言之：长的简单是在而靠谱不脱离现实
自然而然，大道至简，纯天然。。
怎么看都靠得住，不会忍饥挨饿的。。{:4_170:} 马黑黑 发表于 2024-9-3 20:39
还可以加一些，不过不要贪心，阴影的渲染也是消耗资源的
有80，这么算来240，够够的了。。三百以内都还好吧 欣赏佳作，经典音乐，非常喜欢。能让人心灵安静。 四海八荒 发表于 2024-9-3 20:46
欣赏佳作，经典音乐，非常喜欢。能让人心灵安静。
晚上好