回忆

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

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

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

x

马黑黑 · 发表于 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 以上就行