《透明的声音》（学习黑黑《源》代码效果）
<style>#mydiv {
margin: 130px 0 30px calc(50% - 621px);
width: 1080px;
height: 1409px;
background: url('https://pic.imgdb.cn/item/66a59b56d9c307b7e9421225.jpg') no-repeat center/cover;
box-shadow: 0 0 6px rgba(0,0,0,.6);
overflow: hidden;
z-index: 1;
display: grid;
place-items: center;
position: relative;
}
#mydiv::before {
position: absolute;
content: '';
inset: -100px;
background: repeating-conic-gradient(at 690px 90px , transparent 0%, rgba(255,215,0,.50) 4%, transparent 8%);
transform-origin: 690px 90px;
animation: swear 2s infinite alternate var(--state);
}
#player {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%; transform: rotateX(30deg);
border: 10px double rgba(255,140,0,.7);
cursor: pointer;
animation: rot 12s linear infinite var(--state);
}
#player::before, #player::after {
position: absolute;
content: '';
border-radius: inherit;
border: inherit;
}
#player::before {
inset: 12px;
border: 6px solid orange;
border-color: transparent gold;
}
#player::after { inset: 48px; border-style: dotted; }
#vid {
position: absolute;
top: 0;
right: 0;
width: 1080px;
height: 350px;
opacity: .21;
object-fit: cover;
clip-path: polygon(0 34%, 100% 29%, 100% 60%, 0 90%);
-webkit-mask: linear-gradient(0deg, red 40%, transparent 75%, red 60%);
}
li-zi {
position: absolute;
width: 12px;
height: 14px;
border-radius: 50%;
box-shadow: inset 0 0 10px Orange;
animation: up 4s linear infinite var(--state);
}
@keyframes swear {
from { transform: rotate(-3deg); }
to { transform: rotate(3deg); }
}
@keyframes rot { from { transform: rotateX(60deg) rotate(0deg); } to { transform: rotateX(60deg) rotate(1turn); } }
@keyframes up {
to { transform: translateY(var(--yy)); opacity: 0; }
}
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2133916887" autoplay loop></audio>
<div id="player"></div>
<video id="vid" src="https://img.tukuppt.com/video_show/2421007/00/01/57/5b4623b9c0daf_10s_big.mp4" autoplay loop muted>
</div>
<script>
Array.from({length: 60}).forEach(i => {
i = document.createElement('li-zi');
i.style.cssText += `
left: ${50 + Math.floor(Math.random() * 200)}px;
top: 95px;
background: #${Math.random().toString(16).substring(2,8)};
animation-delay: -${Math.random() * 4}s;
--yy: ${600 * }px;
`;
player.appendChild(i);
});
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> 我把背景伪元素的锥形渐变移动到中间去了，当做是阳光吧。
这个线条竟然能一直延伸到最下面呢。因为是竖向图图，6度的移动漏边了，所以把度数改小了点。
谢谢@马黑黑 的代码{:4_187:} 据说某个海滩有很多透明的小石头，去搜了一下，觉得好美啊。 漂亮的雨花石，这个粒子会旋转呢，先去看看黑黑的教程，现在小辣椒已经拉下一大截了{:4_198:} 亲爱的，刚去看了黑黑的源码分享，这个会旋转的粒子挺漂亮的 看见你的漂亮制作小辣椒可以抄作业了，{:4_170:}
估计我今天来不及做了，下午有点事情 红影 发表于 2024-7-28 11:26
我把背景伪元素的锥形渐变移动到中间去了，当做是阳光吧。
这个线条竟然能一直延伸到最下面呢。因为是竖向 ...
很通透的帖子，赞个 欣赏老师佳作！ 这么漂亮的鹅卵石加上光粒效果，太棒了！{:4_187:} 真透明呀 ， 赞！ 阳光与水纹交织在一起真美！ 小辣椒 发表于 2024-7-28 12:22
漂亮的雨花石，这个粒子会旋转呢，先去看看黑黑的教程，现在小辣椒已经拉下一大截了
是跟着小播一起旋转的。小播我学了上一个帖子的，让它扁一点{:4_173:} 小辣椒 发表于 2024-7-28 12:30
亲爱的，刚去看了黑黑的源码分享，这个会旋转的粒子挺漂亮的
是啊，非常漂亮，旋转的小播也漂亮，纯代码的小播呢。 小辣椒 发表于 2024-7-28 12:32
看见你的漂亮制作小辣椒可以抄作业了，
估计我今天来不及做了，下午有点事情
亲爱的去忙就是了，我也睡了个长长的午觉呢，忽然觉得有点困，就去养精神了{:4_173:} 马黑黑 发表于 2024-7-28 12:59
很通透的帖子，赞个
这样的透明石头的图图我也是第一次看到，边学习代码边欣赏石头了。我去搜了一下，这种石头被称为玻璃鹅卵石，这个据说是俄罗斯某处海滩上的玻璃鹅卵石。 海笑 发表于 2024-7-28 14:01
欣赏老师佳作！
问好海笑，感谢鼓励{:4_187:} 梦江南 发表于 2024-7-28 14:05
这么漂亮的鹅卵石加上光粒效果，太棒了！
我也是头一次看到这样的图图，江南去搜海边的透明石头，好多好漂亮的图图呢，我只选了一个{:4_173:} 起个网名好难 发表于 2024-7-28 14:12
真透明呀 ， 赞！
是啊，这样的石头铺开来被阳光照射着，肯定很迷人。 梦油 发表于 2024-7-28 14:39
阳光与水纹交织在一起真美！
大自然的鬼斧神工{:4_173:} 点石成金的神奇！