自然之声
<style>#mydiv {
margin: 130px 0 30px calc(50% - 593px);
width: 1024px;
height: 576px;
background: url('https://638183.freep.cn/638183/t24/3/zrvu.jpg') no-repeat center/cover;
box-shadow: 0 0 10px rgba(0,0,0,.5);
overflow: hidden;
z-index: 1;
position: relative;
}
#mydiv:hover #player { opacity: .8; }
#mydiv::before {
position: absolute;
content: '';
inset: -260px;
background: radial-gradient(circle, transparent, rgba(60,0,120,.35), transparent) center / 30% 30%;
transform: rotate(0deg);
animation: bgsize 8s infinite alternate var(--state);
}
#player {
position: absolute;
left: calc(50% - 75px);
top: 150px;
mix-blend-mode: multiply;
transition: 1s;
opacity: 0;
cursor: pointer;
}
@keyframes bgsize {
to { transform: rotate(360deg); background-size: 50% 50%; }
}
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1899223061" autoplay loop></audio>
<img id="player" src="https://638183.freep.cn/638183/small/sunbirds.jpg" alt="" title="播放/暂停" />
</div>
<script>
//自然之声
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', ['running', 'paused'][+aud.paused]);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#mydiv {
margin: 130px 0 30px calc(50% - 593px);
width: 1024px;
height: 576px;
background: url('https://638183.freep.cn/638183/t24/3/zrvu.jpg') no-repeat center/cover;
box-shadow: 0 0 10px rgba(0,0,0,.5);
overflow: hidden;
position: relative;
}
#mydiv:hover #player { opacity: .8; }
#mydiv::before {
position: absolute;
content: '';
inset: -260px;
background: radial-gradient(circle, transparent, rgba(60,0,120,.35), transparent) center / 30% 30%;
transform: rotate(0deg);
animation: bgsize 8s infinite alternate var(--state);
}
#player {
position: absolute;
left: calc(50% - 75px);
top: 150px;
mix-blend-mode: multiply;
transition: 1s;
opacity: 0;
cursor: pointer;
}
@keyframes bgsize {
to { transform: rotate(360deg); background-size: 50% 50%; }
}
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1899223061" autoplay loop></audio>
<img id="player" src="https://638183.freep.cn/638183/small/sunbirds.jpg" alt="" title="播放/暂停" />
</div>
<script>
//自然之声
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', ['running', 'paused'][+aud.paused]);
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> 太阳和鸟一会看见一会看不见，神奇。 哦，碰到背景才能看见。梦一样的场景。 本帖：
（一）伪元素 ::before 做CSS关键帧动画特效：伪元素尺寸宽高均大于帖子容器宽高的260px，背景尺寸从 30% 30% 变为 50% 50%，整体旋转360度，往复运动（animation属性中的 alternate 参数）。
（二）播放器静态，初始状态透明度 0（不显示），设备指针移动到帖子区域透明度变为 20%（opacity设置的是不透明度，.8 表示 80% 的不透明度）。11行代码就是控制透明度的这个变化。 竹溪 发表于 2024-7-20 09:32
哦，碰到背景才能看见。梦一样的场景。
{:4_199:} 竹溪 发表于 2024-7-20 09:31
太阳和鸟一会看见一会看不见，神奇。
{:4_190:} inset:加径向渐变的设置，让紫色的圆环在外侧变化，流光溢彩，营造出如此美妙的效果，比视频效果都美，而且是自己能控制的，太厉害了{:4_199:} 马黑黑 发表于 2024-7-20 09:36
本帖：
（一）伪元素 ::before 做CSS关键帧动画特效：伪元素尺寸宽高均大于帖子容器宽高的260px，背景尺 ...
还可以这样，小播不动而且鼠标不进入帖子时隐藏，而想找控制按钮时鼠标必然是进入的。
小播是可以不转动的，也可以控制音乐，这个好{:4_187:} 黑黑总能带来惊奇{:4_187:} 红影 发表于 2024-7-20 10:13
黑黑总能带来惊奇
果酱果酱 红影 发表于 2024-7-20 09:48
还可以这样，小播不动而且鼠标不进入帖子时隐藏，而想找控制按钮时鼠标必然是进入的。
小播是可以不转动 ...
播放控制器不一定是动的 红影 发表于 2024-7-20 09:46
inset:加径向渐变的设置，让紫色的圆环在外侧变化，流光溢彩，营造出如此美妙的效果，比视频效果都美，而且 ...
{:4_180:} 马黑黑 发表于 2024-7-20 10:25
果酱果酱
这个又想跟着做了，只是要出发了，回来再做了。 马黑黑 发表于 2024-7-20 10:26
播放控制器不一定是动的
习惯了它就是动的啊，这个让它不动了{:4_173:} 马黑黑 发表于 2024-7-20 10:26
这些效果如果不是在黑黑的帖子里见到，完全想不到。 点一下出来个太阳？还有仙鹤，这个寓意挺好～手机看一样清晰～ 这个闪烁与之前不同，不是线性左右移动，更像径向渐变产生的圆围绕一圈转动闪烁～背景选的是真好，高远辽阔，心旷神怡～
音乐好听，自然空灵，点赞👍 看大家回复，白老师还有更细的变化和设计，只能等电脑时再感受啦 红影 发表于 2024-7-20 10:51
这个又想跟着做了，只是要出发了，回来再做了。
不急慢慢来