律动
<style>#mydiv { --width: 1280px; margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 720px;background-image: radial-gradient(circle at center center, rgb(143, 39, 176) 0%, rgb(143, 39, 176) 11%,rgb(128, 38, 169) 11%, rgb(128, 38, 169) 13%,rgb(113, 38, 163) 13%, rgb(113, 38, 163) 17%,rgb(98, 37, 156) 17%, rgb(98, 37, 156) 28%,rgb(83, 37, 150) 28%, rgb(83, 37, 150) 40%,rgb(68, 36, 143) 40%, rgb(68, 36, 143) 72%,rgb(53, 36, 137) 72%, rgb(53, 36, 137) 81%,rgb(38, 35, 130) 81%, rgb(38, 35, 130) 100%); box-shadow: 4px 3px 8px #666; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; --bgsize: 25%; }
#mydiv::before, #mydiv::after { position: absolute; content: ''; width: 100%; height: 100%; background-image: inherit; background-size: var(--bgsize); opacity: .4; transform: rotate(-45deg); pointer-events: none; animation: chg .25s linear infinite alternate var(--state); }
#mydiv::after { transform: rotate(45deg); animation-delay: -0.125; }
#player { position: absolute; width: 102px; filter: hue-rotate(0deg); transition: width .5s; cursor: pointer; animation: rot 8s linear infinite var(--state), hue 30s linear infinite alternate var(--state); }
#player:hover { width: 120px; }
@keyframes chg { to { --bgsize: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes hue { to { filter: hue-rotate(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1841432385" autoplay loop></audio>
<img id="player" alt="" src="https://638183.freep.cn/638183/t23/btn/f5.png" titel="播放/暂停" />
</div>
<script>
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#mydiv',
css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: transparent;',
});
var mState = () => {
mydiv.style.setProperty('--state',['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
帖子代码：
<style>
#mydiv { --width: 1280px; margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 720px;background-image: radial-gradient(circle at center center, rgb(143, 39, 176) 0%, rgb(143, 39, 176) 11%,rgb(128, 38, 169) 11%, rgb(128, 38, 169) 13%,rgb(113, 38, 163) 13%, rgb(113, 38, 163) 17%,rgb(98, 37, 156) 17%, rgb(98, 37, 156) 28%,rgb(83, 37, 150) 28%, rgb(83, 37, 150) 40%,rgb(68, 36, 143) 40%, rgb(68, 36, 143) 72%,rgb(53, 36, 137) 72%, rgb(53, 36, 137) 81%,rgb(38, 35, 130) 81%, rgb(38, 35, 130) 100%); box-shadow: 4px 3px 8px #666; overflow: hidden; position: relative; display: grid; place-items: center; --bgsize: 25%; }
#mydiv::before, #mydiv::after { position: absolute; content: ''; width: 100%; height: 100%; background-image: inherit; background-size: var(--bgsize); opacity: .4; transform: rotate(-45deg); pointer-events: none; animation: chg .25s linear infinite alternate var(--state); }
#mydiv::after { transform: rotate(45deg); animation-delay: -0.125; }
#player { position: absolute; width: 102px; filter: hue-rotate(0deg); transition: width .5s; cursor: pointer; animation: rot 8s linear infinite var(--state), hue 30s linear infinite alternate var(--state); }
#player:hover { width: 120px; }
@keyframes chg { to { --bgsize: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes hue { to { filter: hue-rotate(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1841432385" autoplay loop></audio>
<img id="player" alt="" src="https://638183.freep.cn/638183/t23/btn/f5.png" titel="播放/暂停" />
</div>
<script>
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#mydiv',
css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: transparent;',
});
var mState = () => {
mydiv.style.setProperty('--state',['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
本帖最后由 马黑黑 于 2024-7-5 12:37 编辑
帖子主要特点：伪元素背景动画
相关代码在 03、04、07 行：
第03行：animation: chg .25s linear infinite alternate var(--state);【调用 chg 关键帧动画】
第04行：animation-delay: -0.125; 【::after 伪元素动画提前】
第07行：@keyframes chg { to { --bgsize: 100%; } } 【设计动画 - 改变自定义背景尺寸CSS变量 --bgsize 的值】 这个纯代码背景，隐隐约约，若有似无。。静中有动。。
外圆内方，有层次感，空间感。。
神奇。。。 看了半天，漂亮，帅。。。
透明度都可以影响到背景的花纹图案。。
这是一个很神奇的背景世界~~ 很奇妙的设计，背景只是简单的同心圆，被伪元素取了小尺寸并加了旋转，就能营造出这么奇妙的效果呢{:4_199:} 两个伪元素分别取小尺寸平铺吧，这样的旋转读数还挺对称的呢{:4_187:} 应该是底图越复杂，得到的伪元素律动越好看吧，不知道昨天的底图换进去会怎样{:4_173:} 去试过了，这个伪元素动图还是适合今天的这个背景图{:4_173:} 代码真神奇，代码在老师手里像魔术一样变幻无穷。{:4_187:} 南无月 发表于 2024-7-5 12:40
这个纯代码背景，隐隐约约，若有似无。。静中有动。。
外圆内方，有层次感，空间感。。
神奇。。。
方的效果是伪元素营造的：它们固定旋转角度，改变背景大小。因伪元素的旋转出现尖角，因其背景尺寸的变化出现律动。 梦江南 发表于 2024-7-5 14:05
代码真神奇，代码在老师手里像魔术一样变幻无穷。
{:4_190:} 南无月 发表于 2024-7-5 12:55
看了半天，漂亮，帅。。。
透明度都可以影响到背景的花纹图案。。
这是一个很神奇的背景世界~~
这在作图时应该有所感受吧 红影 发表于 2024-7-5 13:28
很奇妙的设计，背景只是简单的同心圆，被伪元素取了小尺寸并加了旋转，就能营造出这么奇妙的效果呢{:4_199: ...
这原理瞧出来了。
伪元素尺寸与父元素一致，背景从较小的 background-size 变为 100% 并来回变换 红影 发表于 2024-7-5 13:43
去试过了，这个伪元素动图还是适合今天的这个背景图
一切各有所适 红影 发表于 2024-7-5 13:39
应该是底图越复杂，得到的伪元素律动越好看吧，不知道昨天的底图换进去会怎样
一切皆有可能 吃瓜的愉悦心情，防暑降温。{:4_174:} 马黑黑 发表于 2024-7-5 14:11
方的效果是伪元素营造的：它们固定旋转角度，改变背景大小。因伪元素的旋转出现尖角，因其背景尺寸的变化 ...
好哒，开始时只看到伪元素起了不小的作用，
你这么解释一下好象明白一些。
今天又是小跑的一天。。晚上回去仔细研究。{:4_173:} 马黑黑 发表于 2024-7-5 14:12
这在作图时应该有所感受吧
这个因透明度的改变而主生的变化有点大，跟做图时的透明度改变的完全不一样。{:4_173:} 南无月 发表于 2024-7-5 17:17
这个因透明度的改变而主生的变化有点大，跟做图时的透明度改变的完全不一样。
你可以试试制作动图看看