戴树红·碧涧流泉
<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; user-select: none; 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 id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5269161" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/3664703/00/02/08/5b5041984d4dc.mp4" muted loop autoplay></video>
</div>
<script>
(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>
<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #mydiv { <span class="tBlue">margin:</span> 30px 0 30px calc(50% - 593px); <span class="tBlue">width:</span> 1024px; <span class="tBlue">height:</span>680px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/2/bjlq.jpeg'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 2px 2px 6px rgba(0,0,0,.6); <span class="tBlue">overflow:</span> hidden; <span class="tBlue">z-index:</span> 1; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"> txt-box { <span class="tBlue">position:</span> absolute; <span class="tBlue">display:</span> grid; <span class="tBlue">place-items:</span> center; <span class="tBlue">left:</span> <span class="tBlue">var</span>(--xx); <span class="tBlue">bottom:</span> 10px; <span class="tBlue">width:</span> 50px; <span class="tBlue">height:</span> 50px; <span class="tBlue">font:</span> normal 30px sans-serif; <span class="tBlue">color:</span> snow; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">transition:</span> .5s; <span class="tBlue">animation:</span> move 5s <span class="tBlue">var</span>(--delay) linear infinite alternate <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="4"> txt-box::after { <span class="tBlue">position:</span> absolute; <span class="tBlue">content:</span> <span class="tMagenta">''</span>; <span class="tBlue">inset:</span> -4px; <span class="tBlue">border:</span> thick outset lightgreen; <span class="tBlue">border-radius:</span> 0 50%; <span class="tBlue">animation:</span> rot 5s <span class="tBlue">var</span>(--delay) linear infinite alternate <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">txt-box:</span>hover { <span class="tBlue">filter:</span> sepia(100%) drop-shadow(0 -80px 10px white); }</cl-cd>
<cl-cd data-idx="6"> #vid { <span class="tBlue">position:</span> absolute; <span class="tBlue">bottom:</span> 0; <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> calc(100% + 60px); <span class="tBlue">object-fit:</span> cover; <span class="tBlue">mix-blend-mode:</span> multiply; <span class="tBlue">opacity:</span> .75; <span class="tBlue">pointer-events:</span> none; }</cl-cd>
<cl-cd data-idx="7"> @keyframes move { to { <span class="tBlue">bottom:</span> 150px; } }</cl-cd>
<cl-cd data-idx="8"> @keyframes rot { to { <span class="tBlue">transform:</span> rotateX(360deg); } }</cl-cd>
<cl-cd data-idx="9"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="10"> </cl-cd>
<cl-cd data-idx="11"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"mydiv"</span>></cl-cd>
<cl-cd data-idx="12"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=5269161"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="13"> <<span class="tDarkRed">video</span> <span class="tRed">id</span>=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/3664703/00/02/08/5b5041984d4dc.mp4"</span> muted loop autoplay><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="14"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="15"> </cl-cd>
<cl-cd data-idx="16"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="17">(<span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="18"> <span class="tBlue">const</span> ar = <span class="tMagenta">'涧水流花去山云载鹤归'</span>.split(<span class="tMagenta">''</span>);</cl-cd>
<cl-cd data-idx="19"> <span class="tBlue">const</span> total = ar.length, half = <span class="tRed">Math</span>.floor(ar.length / 2), ww = 700;</cl-cd>
<cl-cd data-idx="20"> <span class="tBlue">let</span> tbAr = [];</cl-cd>
<cl-cd data-idx="21"> ar.forEach((t,k) => {</cl-cd>
<cl-cd data-idx="22"> <span class="tBlue">let</span> tbox = <span class="tRed">document</span>.createElement(<span class="tMagenta">'txt-box'</span>);</cl-cd>
<cl-cd data-idx="23"> tbox.textContent = t;</cl-cd>
<cl-cd data-idx="24"> tbox.style.cssText += `</cl-cd>
<cl-cd data-idx="25"> <span class="tBlue">--xx:</span> ${ww / total * k + 180}px;</cl-cd>
<cl-cd data-idx="26"> <span class="tBlue">--delay:</span> -${k < half ? k * 0.5 : (total - k) * 0.5}s;</cl-cd>
<cl-cd data-idx="27"> `;</cl-cd>
<cl-cd data-idx="28"> tbAr.push(tbox);</cl-cd>
<cl-cd data-idx="29"> mydiv.appendChild(tbox);</cl-cd>
<cl-cd data-idx="30"> });</cl-cd>
<cl-cd data-idx="31"> aud.onplaying = aud.onpause = () => {</cl-cd>
<cl-cd data-idx="32"> mydiv.style.setProperty(<span class="tMagenta">'--state'</span>, [<span class="tMagenta">'running'</span>,<span class="tMagenta">'paused'</span>][+aud.paused]);</cl-cd>
<cl-cd data-idx="33"> aud.paused ? vid.pause() : vid.play();</cl-cd>
<cl-cd data-idx="34"> tbAr.forEach(tb => tb.title = [<span class="tMagenta">'暂停'</span>,<span class="tMagenta">'播放'</span>][+aud.paused]);</cl-cd>
<cl-cd data-idx="35"> };</cl-cd>
<cl-cd data-idx="36"> tbAr.forEach(tb => tb.onclick = () => aud.paused ? aud.play() : aud.pause());</cl-cd>
<cl-cd data-idx="37">})();</cl-cd>
<cl-cd data-idx="38"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
本帖最后由 马黑黑 于 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 是阴影颜色。 好看，学习下~~{:4_190:} 这个是纵向变化的文字按钮了，而且外框还能反转的呢。漂亮{:4_199:} 鼠标触动的滤镜效果也漂亮，还有个-80的飘到上面的阴影{:4_187:} 马黑黑 发表于 2024-6-5 12:09
本帖：
（一）文本按钮动画 ：上下位移运动通过动画延时参数 animation-delay （即CSS变量 --delay）的 ...
字变成上下运动了。。
这个波浪起伏的效果特别好看。。
这个边框运动得跟字在跳绳似的。。
叶子形状跟背景和视频很搭。。。 鼠标碰触除了边框 变色之外，还有灵魂出窍效果。。。一团白雾直接飞升。。{:4_170:} 南无月 发表于 2024-6-5 17:49
鼠标碰触除了边框 变色之外，还有灵魂出窍效果。。。一团白雾直接飞升。。
{:4_172:} 南无月 发表于 2024-6-5 17:47
这个边框运动得跟字在跳绳似的。。
叶子形状跟背景和视频很搭。。。
果酱果酱 南无月 发表于 2024-6-5 17:46
字变成上下运动了。。
这个波浪起伏的效果特别好看。。
这里面有个算法，虽然不算太复杂 红影 发表于 2024-6-5 14:15
鼠标触动的滤镜效果也漂亮，还有个-80的飘到上面的阴影
{:4_190:} 朵拉 发表于 2024-6-5 12:09
好看，学习下~~
{:4_190:} 红影 发表于 2024-6-5 14:11
这个是纵向变化的文字按钮了，而且外框还能反转的呢。漂亮
还行的吧 马黑黑 发表于 2024-6-5 17:57
这里面有个算法，虽然不算太复杂
其实昨天有想，这些字能左右走，能不能竖排上下走。。靠左或者右的。。
今天就看到上下运动了。跟想的不太一样的是横排的。{:4_170:} 马黑黑 发表于 2024-6-5 17:56
果酱果酱
{:4_173:}把字换成人，把边框换成竖椭圆，是不是就跳起来了 马黑黑 发表于 2024-6-5 17:56
难为你是怎么想出来的。。
这个神来之笔。。{:4_170:} 南无月 发表于 2024-6-5 20:58
把字换成人，把边框换成竖椭圆，是不是就跳起来了
你可以试试 南无月 发表于 2024-6-5 20:59
难为你是怎么想出来的。。
这个神来之笔。。
{:4_203:}