论坛 › 欢乐水吧 › 探触寂静

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

探触寂静

本帖最后由 马黑黑 于 2024-7-9 12:15 编辑 <br /><br /><style>
#mydiv { --width: 1024px; margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px)); 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://638183.freep.cn/638183/t24/3/tijj.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: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

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

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

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

background:


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

南无月 发表于 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%,
这两个渐变只是方向不同，一向左一向右。。只有中间透明度略有变化。。
对色彩的设计的把控太细微了。。{:4_199:}
肉眼难以识别，超赞

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

音乐超赞，静谧悠长~~跟瑜伽音乐似的

竹溪 发表于 2024-7-9 13:20

看到了中间颜色有变化，背景很静，无人区的感觉。

梦江南 发表于 2024-7-9 15:17

背景中间的颜色在变化，看到了。{:4_199:}

老谟深虑 发表于 2024-7-9 15:30

         看到了颜色的变化，真好！

红影 发表于 2024-7-9 17:54

用色彩变化，营造出了视频般的效果，这个好{:4_199:}

马黑黑 发表于 2024-7-9 20:54

红影 发表于 2024-7-9 17:54
用色彩变化，营造出了视频般的效果，这个好

晚上嚎

马黑黑 发表于 2024-7-9 20:56

老谟深虑 发表于 2024-7-9 15:30
看到了颜色的变化，真好！

晚上好啊

马黑黑 发表于 2024-7-9 20:56

梦江南 发表于 2024-7-9 15:17
背景中间的颜色在变化，看到了。

很弱的变化

马黑黑 发表于 2024-7-9 20:57

南无月 发表于 2024-7-9 12:59
这个背景变色跟昨天不一样，不用鼠标触碰啊，自己就变了。

变变更快乐

马黑黑 发表于 2024-7-9 20:57

南无月 发表于 2024-7-9 13:00
两个线性渐变加一个径向渐变。
在动画中，只有最后一个径向渐变由60% 80%,变成了100%，别的到是不变。。 ...

这个分析一步到位

马黑黑 发表于 2024-7-9 20:57

竹溪 发表于 2024-7-9 13:20
看到了中间颜色有变化，背景很静，无人区的感觉。

感谢支持

马黑黑 发表于 2024-7-9 20:58

南无月 发表于 2024-7-9 13:04
音乐超赞，静谧悠长~~跟瑜伽音乐似的

这是俺经常使用的催眠曲，一般听九个钟之后会自然入睡{:4_170:}

红影 发表于 2024-7-9 22:27

马黑黑 发表于 2024-7-9 20:56
晚上好啊

这些变化能营造出很多效果呢{:4_187:}

朵拉 发表于 2024-7-10 10:45

落下好多作业，慢慢完成哈~~

查看完整版本: 探触寂静