戴树红·碧涧流泉

马黑黑 · 发表于 2024-6-5 11:57

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

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

x

马黑黑 · 发表于 2024-6-5 11:58

代码

<style>

#mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height:680px; background: url('https://638183.freep.cn/638183/t24/2/bjlq.jpeg') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); overflow: hidden; z-index: 1; position: relative; }

txt-box { position: absolute; display: grid; place-items: center; left: var(--xx); bottom: 10px; width: 50px; height: 50px; font: normal 30px sans-serif; color: snow; cursor: pointer; transition: .5s; animation: move 5s var(--delay) linear infinite alternate var(--state); }

txt-box::after { position: absolute; content: ''; inset: -4px; border: thick outset lightgreen; border-radius: 0 50%; animation: rot 5s var(--delay) linear infinite alternate var(--state); }

txt-box:hover { filter: sepia(100%) drop-shadow(0 -80px 10px white); }

#vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: multiply; opacity: .75; pointer-events: none; }

@keyframes move { to { bottom: 150px; } }

@keyframes rot { to { transform: rotateX(360deg); } }

</style>

</div>

(function() {

const ar = '涧水流花去山云载鹤归'.split('');

const total = ar.length, half = Math.floor(ar.length / 2), ww = 700;

let tbAr = [];

ar.forEach((t,k) => {

let tbox = document.createElement('txt-box');

tbox.textContent = t;

tbox.style.cssText += `

--xx: ${ww / total * k + 180}px;

--delay: -${k < half ? k * 0.5 : (total - k) * 0.5}s;

`;

tbAr.push(tbox);

mydiv.appendChild(tbox);

});

aud.onplaying = aud.onpause = () => {

mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);

aud.paused ? vid.pause() : vid.play();

tbAr.forEach(tb => tb.title = ['暂停','播放'][+aud.paused]);

};

tbAr.forEach(tb => tb.onclick = () => aud.paused ? aud.play() : aud.pause());

})();

</script>

马黑黑 · 发表于 2024-6-5 12:09

本帖最后由马黑黑于 2024-6-5 12:10 编辑

本帖：

（一）文本按钮动画：上下位移运动通过动画延时参数 animation-delay （即CSS变量 --delay）的错落算法（代码第26行）实现整体曲线态势；外圈（伪元素）旋转则使用 transform: rotateX(deg) 沿X轴翻滚。

（二）文本按钮的X方向布排：即CSS变量 --xx 的赋值计算（代码第25行），--xx: ${ww / total * k + 180}px;，给定宽度/文字总数*文本序列号 + 左边距，左边距指第一个字离帖子容器元素左边缘的距离。

（三）文本按钮动态阴影：使用 filter: drop-shadow(x y r color); 滤镜设置，x、y 是阴影横纵方向偏移量，支持负数值，r 是阴影模糊半径，color 是阴影颜色。