探触寂静

马黑黑 · 发表于 2024-7-9 12:11

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-7-9 12:15 编辑

马黑黑 · 发表于 2024-7-9 12:12

帖子代码

<style>
#mydiv { --width: 1024px; margin: 30px 0 30px calc(50% - (var(--width) / 2 + 1px)); width: var(--width); height: 640px; border: 1px solid gray; background: linear-gradient(to top right, rgba(0,90,0,.1), rgba(0,90,0,.5), rgba(0,90,0,.1)) center/100%, linear-gradient(to top left, rgba(0,90,0,.1), rgba(0,90,0,.5), rgba(0,90,0,.1)) center/100%, repeating-radial-gradient(red, transparent, transparent) center/60% 80%, url('https://img.zcool.cn/community/01a2685d73390ca8012060befbe29c.jpg@3000w_1l_0o_100sh.jpg') no-repeat center/cover ; background-blend-mode: overlay; animation: bgmove 3s infinite alternate var(--state); z-index: 1; position: relative; }
#player { position: absolute; left: calc(50% - 60px); top: 30px; width: 120px; filter: hue-rotate(175deg); transition: width 2s; opacity: .65; cursor: pointer; animation: rot 8s linear infinite var(--state); }
#player:hover { width: 150px; }
@keyframes bgmove { to { background-size: 100%,100%,100% 100%,cover; } }
@keyframes rot { to {transform: rotate(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5256016" autoplay loop></audio>
<img id="player" alt="" src="https://638183.freep.cn/638183/t23/btn/hshx.png" />
</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-9 12:27

本帖，使用渐变背景营造预设效果：

background:
linear-gradient(to top right, rgba(0,90,0,.1), rgba(0,90,0,.5), rgba(0,90,0,.1)) center/100%,
linear-gradient(to top left, rgba(0,90,0,.1), rgba(0,90,0,.5),
rgba(0,90,0,.1)) center/100%, repeating-radial-gradient(red, transparent, transparent) center/60% 80%,
url('图片地址') no-repeat center/cover; background-blend-mode: overlay;
前三组背景是渐变背景，它们通过透明度、融合滤镜的共同作用，得到所需的静态外观。

背景动画为了烘托静的主题，幅度和色彩均有所弱化：

@keyframes bgmove { to { background-size: 100%,100%,100% 100%,cover; } }

结合渐变背景设置，可以看到，仅改变第三组渐变的 background-size 数字。

这里需要注意的是@keyframes 属性设置中多个背景尺寸的设置方法，每一组背景尺寸数字都得给出，不变的保持原来的数字，各组之间用小角逗号隔开，需要同时表达XY方向的，每一组需要两个数字、用空格隔开。

南无月 · 发表于 2024-7-9 12:59

这个背景变色跟昨天不一样，不用鼠标触碰啊，自己就变了。

南无月 · 发表于 2024-7-9 13:00

马黑黑发表于 2024-7-9 12:27
本帖，使用渐变背景营造预设效果：

background:

两个线性渐变加一个径向渐变。
在动画中，只有最后一个径向渐变由60% 80%,变成了100%，别的到是不变。。。

南无月 · 发表于 2024-7-9 13:03

inear-gradient(to top right, rgba(0,90,0,.1), rgba(0,90,0,.5), rgba(0,90,0,.1)) center/100%,
linear-gradient(to top left, rgba(0,90,0,.1), rgba(0,90,0,.5), rgba(0,90,0,.1)) center/100%,
这两个渐变只是方向不同，一向左一向右。。只有中间透明度略有变化。。
对色彩的设计的把控太细微了。。

肉眼难以识别，超赞