游魂飞魄
本帖最后由 马黑黑 于 2024-7-19 14:56 编辑 <br /><br /><style>#mydiv {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
background: url('https://638183.freep.cn/638183/t24/3/yhfp.jpg') no-repeat center/cover;
box-shadow: 0 0 8px rgba(0,0,0,.6);
z-index: 1;
pointer-events: none;
display: grid;
place-items: center;
position: relative;
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
width: 120px;
height: 120px;
border-radius: 50%;
background: lightblue radial-gradient(teal 4px, transparent 0) center / 12px 8px;
mask: radial-gradient(circle, red 10%, rgba(0,0,0,.25) 80%, red 0);
box-shadow: inset 0 0 4px teal;
pointer-events: auto;
cursor: pointer;
animation: bgchg 18s infinite alternate var(--state), rot 18s linear infinite var(--state);
}
#mydiv::after { right: 260px; top: 80px; animation-delay: -10s; }
@keyframes bgchg { to { background-size: 48px 24px; filter: hue-rotate(360deg); } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1947445277" autoplay loop></audio>
<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', ['running', 'paused'][+aud.paused]);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> 本帖最后由 马黑黑 于 2024-7-19 14:56 编辑 <br /><br /><h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#mydiv {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
background: url('https://638183.freep.cn/638183/t24/3/yhfp.jpg') no-repeat center/cover;
box-shadow: 0 0 8px rgba(0,0,0,.6);
z-index: 1;
pointer-events: none;
display: grid;
place-items: center;
position: relative;
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
width: 120px;
height: 120px;
border-radius: 50%;
background: lightblue radial-gradient(teal 4px, transparent 0) center / 12px 8px;
mask: radial-gradient(circle, red 10%, rgba(0,0,0,.25) 80%, red 0);
box-shadow: inset 0 0 4px teal;
pointer-events: auto;
cursor: pointer;
animation: bgchg 18s infinite alternate var(--state), rot 18s linear infinite var(--state);
}
#mydiv::after { right: 260px; top: 80px; animation-delay: -10s; }
@keyframes bgchg { to { background-size: 48px 24px; filter: hue-rotate(360deg); } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1947445277" autoplay loop></audio>
<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', ['running', 'paused'][+aud.paused]);
mydiv.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 和 ::after 做成，利用渐变背景和遮罩技术制作出UI，辅之以两个关键帧动画，营造神秘莫测的符合帖子音乐主题的氛围。 问好黑黑老师，欣赏点赞！ 这帖子的气氛是有点阴冷冷的。 很能衬托气氛呢。下班了，先欣赏帖子，到家再细细学习代码{:4_199:} 红影 发表于 2024-7-19 17:03
很能衬托气氛呢。下班了，先欣赏帖子，到家再细细学习代码
{:4_190:} 梦江南 发表于 2024-7-19 15:02
这帖子的气氛是有点阴冷冷的。
{:4_181:} 梦江南 发表于 2024-7-19 15:00
问好黑黑老师，欣赏点赞！
{:4_204:} 游魂飞魄，果然是一曲轻音乐～万圣节主题的，从未听过～不恐怖，很新奇～ 马黑黑 发表于 2024-7-19 13:18
本帖：
两个小播用帖子容器自身的伪元素 ::before 和 ::after 做成，利用渐变背景和遮罩技术制作出UI， ...
盲猜还是不靠谱，终于看到代码～
背景小点点有尺寸变动，还有色相变化～
球体有径向渐变营造立体效果～
还有整体旋转，几个因素合在一起～
纯代码绘制效果，创意超赞
小点点的依次聚拢散开好奇妙，而且会变色的，还带着立体感。这样的小播真漂亮{:4_199:} 原来background-size小，点点就多，否则点点就少，聚拢和散开竟是这样来的呢，这构思真巧妙{:4_199:} 红影 发表于 2024-7-19 19:33
原来background-size小，点点就多，否则点点就少，聚拢和散开竟是这样来的呢，这构思真巧妙
{:4_190:} 南无月 发表于 2024-7-19 19:11
盲猜还是不靠谱，终于看到代码～
背景小点点有尺寸变动，还有色相变化～
球体有径向渐变营造立体效果～ ...
晚上超嚎 啊~~~打开界面有点怕怕的{:4_189:} 马黑黑 发表于 2024-7-19 20:33
盯着看了半天，这个很奇妙{:4_187:} 电脑预览了一下beforefter的效果可以做出这个奇特的效果{:4_178:} 这个帖没有加视频的 小辣椒 发表于 2024-7-19 20:52
这个帖没有加视频的
可加可不加，看需要