论坛 › 欢乐水吧 › 回忆

马黑黑 发表于 2024-7-6 08:28

回忆

<style>
        #mydiv { margin: 130px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://file.moyublog.com/free_wallpapers_files/3qeq5pru4yx.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #333; overflow: hidden; display: grid; place-items: center; position: relative; }
        #mydiv::before { position: absolute; content: ''; inset: 0; background-image: repeating-linear-gradient(135deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, hsl(194,74%,56%), hsl(266,74%,56%), hsl(338,74%,56%), hsl(50,74%,56%), hsl(122,74%,56%)); mix-blend-mode: screen; animation: chg 6s infinite cubic-bezier(0.11, 0.47, 0.81, 1.24) alternate var(--state); }
        #player { position: absolute; width: 100px; filter: hue-rotate(75deg); transition: width .5s; opacity: .5; cursor: pointer; animation: rot 8s linear infinite var(--state); }
    #player:hover { width: 120px; }
    @keyframes rot { to { transform: rotate(360deg); } }
    @keyframes chg { to { inset: -160px; } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1438432942" autoplay loop></audio>
<img id="player" alt="" src="https://638183.freep.cn/638183/web/svg/clover4.svg" 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-6 08:28

帖子代码
<style>
        #mydiv { margin: 130px 0 30pc calc(50% - 593px); width: 1024px; height: 640px; background: url('https://file.moyublog.com/free_wallpapers_files/3qeq5pru4yx.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #333; overflow: hidden; display: grid; place-items: center; position: relative; }
        #mydiv::before { position: absolute; content: ''; inset: 0; background-image: repeating-linear-gradient(135deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, hsl(194,74%,56%), hsl(266,74%,56%), hsl(338,74%,56%), hsl(50,74%,56%), hsl(122,74%,56%)); mix-blend-mode: screen; animation: chg 6s infinite cubic-bezier(0.11, 0.47, 0.81, 1.24) alternate var(--state); }
        #player { position: absolute; width: 100px; filter: hue-rotate(75deg); transition: width .5s; opacity: .5; cursor: pointer; animation: rot 8s linear infinite var(--state); }
    #player:hover { width: 120px; }
    @keyframes rot { to { transform: rotate(360deg); } }
    @keyframes chg { to { inset: -160px; } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1438432942" autoplay loop></audio>
<img id="player" alt="" src="https://638183.freep.cn/638183/web/svg/clover4.svg" 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-6 08:33

本帖：

动态效果通过伪元素 ::before 实现，关键帧动画 chg 改变的是伪元素的 inset 属性，从 0 到 -160px 的双向变化，加之伪元素渐变背景的效果，产生奇妙的观感。

实现手段中，还有 mix-blend-mode 融合属性加持，用于伪元素，这样能更为美妙地作用于主元素的图片背景。

马黑黑 发表于 2024-7-6 08:36

inset 属性 是 top、right、bottom、left 四个属性的缩写。

inset: 0;

等价于：

left: 0;
top: 0;
right: 0;
bottom: 0;

这将是的绝对定位的子元素 width 为主元素的 100%、height 为主元素的 100%。
现代浏览器都支持 inset 属性，比如 Chromium 内核 87 以上就行

南无月 发表于 2024-7-6 08:53

手机看是给帖子加了个面纱似的～蒙面丽莎～小点点左右来回跑得哇

梦油 发表于 2024-7-6 09:25

记忆如画，色彩斑斓，线条虽然曲折，但却是心中永恒的星光。

马黑黑 发表于 2024-7-6 09:38

梦油 发表于 2024-7-6 09:25
记忆如画，色彩斑斓，线条虽然曲折，但却是心中永恒的星光。

你这个解读太赞了{:4_190:}

马黑黑 发表于 2024-7-6 09:39

南无月 发表于 2024-7-6 08:53
手机看是给帖子加了个面纱似的～蒙面丽莎～小点点左右来回跑得哇

很哇塞的样纸吧{:4_170:}

南无月 发表于 2024-7-6 11:30

马黑黑 发表于 2024-7-6 09:39
很哇塞的样纸吧

电脑看了，非常惊艳，选得背景图也朦胧。。。。
全屏看更加震撼。。
有拿它当动态桌面背景的想法。{:4_170:}

南无月 发表于 2024-7-6 11:33

cubic-bezier(0.11, 0.47, 0.81, 1.24) 这个动态设计的是曲线，难怪看着如此流畅，还波浪起伏的。。
以前从未用过的的吧。。。

南无月 发表于 2024-7-6 11:37

小点点的设计出现三次线性渐变。。所以颜色丰富多彩，{:4_199:}看着十分漂亮

南无月 发表于 2024-7-6 11:40

马黑黑 发表于 2024-7-6 08:33
本帖：

动态效果通过伪元素 ::before 实现，关键帧动画 chg 改变的是伪元素的 inset 属性，从 0 到 -160 ...

mix-blend-mode: screen; 必须存在，原来小点点背景黑色的。。{:4_173:}

马黑黑 发表于 2024-7-6 12:33

南无月 发表于 2024-7-6 11:40
mix-blend-mode: screen; 必须存在，原来小点点背景黑色的。。

所有融合滤镜，会有几个合适，先试一试自己熟悉的，不理想再试别的

马黑黑 发表于 2024-7-6 12:33

南无月 发表于 2024-7-6 11:37
小点点的设计出现三次线性渐变。。所以颜色丰富多彩，看着十分漂亮

这些设计极具想象力

马黑黑 发表于 2024-7-6 12:34

南无月 发表于 2024-7-6 11:30
电脑看了，非常惊艳，选得背景图也朦胧。。。。
全屏看更加震撼。。
有拿它当动态桌面背景的想法。{:4_ ...

那个点点好是好不够柔和漂酿

红影 发表于 2024-7-6 14:00

这个背景好漂亮，尤其全屏时候，像进入了梦幻世界一般。{:4_199:}
嗯，学习先欣赏帖子再学习代码{:4_173:}

马黑黑 发表于 2024-7-6 14:04

红影 发表于 2024-7-6 14:00
这个背景好漂亮，尤其全屏时候，像进入了梦幻世界一般。
嗯，学习先欣赏帖子再学习代码

对，要先觉得美，然后才去研究为什么美

红影 发表于 2024-7-6 14:09

先设置了135度和22.5度的黑底，才把后面设置的变成彩色线条并切割成了漂亮的小点点，让小点点为图片蒙上了一层面纱，这样多层次的组合，带来的效果太惊奇了{:4_199:}

红影 发表于 2024-7-6 14:10

(rgb(0,0,0) 0px, rgb(0,0,0) 10px, transparent 10px, transparent 11px)
这个里面为什么要设置两次transparent？不能一次设置得大点么？

红影 发表于 2024-7-6 14:12

@keyframes chg { to { inset: -160px; } }
为什么要取值-160 ，这个值有什么说法么？去试了一下，取值过小，变化就没那么明显了。
貌似可以取值小点，把速度的6秒改小点，也不错。

查看完整版本: 回忆