今日相逢無酒錢
<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; }
#pa {
margin: 60px auto;
width: 400px;
height: 200px;
overflow: hidden;
box-shadow: 2px 2px 6px gray;
position: relative;
--size: 80px;
}
#pa::before, #pa::after {
position: absolute;
content: '';
left: calc(var(--size) / -2);
top: calc(var(--size) / -2);
width: var(--size);
height: var(--size);
border-radius: 40%;
background: green;
animation: move 8s linear infinite;
}
#pa::after {
background: red;
animation-delay: -4s;
}
#son {
position: absolute;
padding: 10px;
background: silver;
inset: 4px;
z-index: 2;
}
#son h3, #son p { margin: 10px 12px; }
@keyframes move {
0%, 100% { left: calc(var(--size) / -2); top: calc(var(--size) / -2); }
30% { left: calc(100% - (var(--size) / 2)); top: calc(var(--size) / -2); }
50% { left: calc(100% - (var(--size) / 2)); top: calc(100% - (var(--size) / 2)); }
80% { left: calc(var(--size) / -2); top: calc(100% - (var(--size) / 2)); }
}
</style>
<div id="pa">
<div id="son">
<h3>別董大二首·其二</h3>
<p>【唐】高適<br><br>六合飄搖私自憐，一離京洛十餘年。<br>丈夫貧賤應未足，今日相逢無酒錢。</p>
</div>
</div>
<h2>代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2">#pa {</cl-cd>
<cl-cd data-idx="3"> <span class="tBlue">margin:</span> 60px auto;</cl-cd>
<cl-cd data-idx="4"> <span class="tBlue">width:</span> 400px;</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">height:</span> 200px;</cl-cd>
<cl-cd data-idx="6"> <span class="tBlue">overflow:</span> hidden;</cl-cd>
<cl-cd data-idx="7"> <span class="tBlue">box-shadow:</span> 2px 2px 6px gray;</cl-cd>
<cl-cd data-idx="8"> <span class="tBlue">position:</span> relative;</cl-cd>
<cl-cd data-idx="9"> <span class="tBlue">--size:</span> 80px;</cl-cd>
<cl-cd data-idx="10">}</cl-cd>
<cl-cd data-idx="11">#pa::before, #pa::after {</cl-cd>
<cl-cd data-idx="12"> <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="13"> <span class="tBlue">content:</span> <span class="tMagenta">''</span>;</cl-cd>
<cl-cd data-idx="14"> <span class="tBlue">left:</span> calc(<span class="tBlue">var</span>(--size) / -2);</cl-cd>
<cl-cd data-idx="15"> <span class="tBlue">top:</span> calc(<span class="tBlue">var</span>(--size) / -2);</cl-cd>
<cl-cd data-idx="16"> <span class="tBlue">width:</span> <span class="tBlue">var</span>(--size);</cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">height:</span> <span class="tBlue">var</span>(--size);</cl-cd>
<cl-cd data-idx="18"> <span class="tBlue">border-radius:</span> 40%;</cl-cd>
<cl-cd data-idx="19"> <span class="tBlue">background:</span> green; </cl-cd>
<cl-cd data-idx="20"> <span class="tBlue">animation:</span> move 8s linear infinite;</cl-cd>
<cl-cd data-idx="21">}</cl-cd>
<cl-cd data-idx="22">#pa::after {</cl-cd>
<cl-cd data-idx="23"> <span class="tBlue">background:</span> red;</cl-cd>
<cl-cd data-idx="24"> <span class="tBlue">animation-delay:</span> -4s;</cl-cd>
<cl-cd data-idx="25">}</cl-cd>
<cl-cd data-idx="26">#son {</cl-cd>
<cl-cd data-idx="27"> <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="28"> <span class="tBlue">padding:</span> 10px;</cl-cd>
<cl-cd data-idx="29"> <span class="tBlue">background:</span> silver;</cl-cd>
<cl-cd data-idx="30"> <span class="tBlue">inset:</span> 4px;</cl-cd>
<cl-cd data-idx="31"> <span class="tBlue">z-index:</span> 2;</cl-cd>
<cl-cd data-idx="32">}</cl-cd>
<cl-cd data-idx="33">#son h3, #son p { <span class="tBlue">margin:</span> 10px 12px; }</cl-cd>
<cl-cd data-idx="34">@keyframes move {</cl-cd>
<cl-cd data-idx="35"> 0%, 100% { <span class="tBlue">left:</span> calc(<span class="tBlue">var</span>(--size) / -2); <span class="tBlue">top:</span> calc(<span class="tBlue">var</span>(--size) / -2); }</cl-cd>
<cl-cd data-idx="36"> 30% { <span class="tBlue">left:</span> calc(100% - (<span class="tBlue">var</span>(--size) / 2)); <span class="tBlue">top:</span> calc(<span class="tBlue">var</span>(--size) / -2); }</cl-cd>
<cl-cd data-idx="37"> 50% { <span class="tBlue">left:</span> calc(100% - (<span class="tBlue">var</span>(--size) / 2)); <span class="tBlue">top:</span> calc(100% - (<span class="tBlue">var</span>(--size) / 2)); }</cl-cd>
<cl-cd data-idx="38"> 80% { <span class="tBlue">left:</span> calc(<span class="tBlue">var</span>(--size) / -2); <span class="tBlue">top:</span> calc(100% - (<span class="tBlue">var</span>(--size) / 2)); }</cl-cd>
<cl-cd data-idx="39">}</cl-cd>
<cl-cd data-idx="40"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="41"> </cl-cd>
<cl-cd data-idx="42"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"pa"</span>></cl-cd>
<cl-cd data-idx="43"> <<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"son"</span>></cl-cd>
<cl-cd data-idx="44"> <<span class="tDarkRed">h</span>3>別董大二首·其二<<span class="tDarkRed">/h</span>3></cl-cd>
<cl-cd data-idx="45"> <<span class="tDarkRed">p</span>>【唐】高適<<span class="tDarkRed">br</span>><<span class="tDarkRed">br</span>>六合飄搖私自憐，一離京洛十餘年。<<span class="tDarkRed">br</span>>丈夫貧賤應未足，今日相逢無酒錢。<<span class="tDarkRed">/p</span>></cl-cd>
<cl-cd data-idx="46"> <<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="47"><<span class="tDarkRed">/div</span>></cl-cd>
</div>
这是一个自研另类边框效果。定义了父元素的宽高是为了演示，实际上它是可以自适应的。
CSS变量 --size 是流动边框的长度，确切说，是父元素两个伪元素的宽高尺寸：伪元素设置为宽高 --size * --size 的尺寸，圆角半径50%是个圆形，父元素禁止延伸到外部的任何内容的显示、内部又由 #son 元素遮挡，仅显示“边框”区域；伪元素执行CSS关键帧动画，呈现出“边框”流动的效果。
@keyframes 使用了 calc 函数，这是实现流动边框自适应的依赖，若设置不同的父元素尺寸，或因文多段落较多改变了父容器的高度，效果依然正常呈现。 本帖最后由 马黑黑 于 2024-6-1 14:52 编辑
流动边框在每一个拐角处动作并不丝滑，这是圆形伪元素做出的效果。若需要丝滑过渡，得改写 @keyframes 动画，别处属性或许也应该相应改变，总体上讲很琐碎，所以将就。 另外，应该一提的是，@keyframes 的百分比应根据实际情况改动，例如，容器元素高度大于宽度，则调整一下百分比，确保纵横流动的速度基本一致。 马黑黑 发表于 2024-6-1 14:47
另外，应该一提的是，@keyframes 的百分比应根据实际情况改动，例如，容器元素高度大于宽度，则调整一下百 ...
转角处有点滞涩感，原来是纵横流速不一样造成的。{:4_187:} 马黑黑 发表于 2024-6-1 14:43
这是一个自研另类边框效果。定义了父元素的宽高是为了演示，实际上它是可以自适应的。
CSS变量 --size...
“父元素禁止延伸到外部的任何内容的显示、内部又由 #son 元素遮挡。。。。”
这样眼睛能看到的，就之剩下边框区域的内容了，这个构思巧妙{:4_199:} 马黑黑 发表于 2024-6-1 14:43
这是一个自研另类边框效果。定义了父元素的宽高是为了演示，实际上它是可以自适应的。
CSS变量 --size...
--size 既是宽高，又用于移动的距离，一个元素多用呢{:4_187:} 又是一种新的边框效果，
这个更活泼了，
循环流动的小边框。。{:4_199:} 本帖最后由 南无月 于 2024-6-1 16:46 编辑
记得之前老师有个贴子叫《童年印象。外婆家》小播也这样流动的边框。。、
现在看来应该是两种完全不同的实现方法
南无月 发表于 2024-6-1 16:45
记得之前老师有个贴子叫《童年印象。外婆家》小播也这样流动的边框。。、
现在看来应该是两种完全不同的实 ...
那个也是流动边框 红影 发表于 2024-6-1 15:19
--size 既是宽高，又用于移动的距离，一个元素多用呢
这个变量是一些算法的依据，否则一旦尺寸改变，你得一个一个数据去修改 红影 发表于 2024-6-1 15:16
转角处有点滞涩感，原来是纵横流速不一样造成的。
不完全是。你把 overflow: hidden 去掉，观察效果 红影 发表于 2024-6-1 15:18
“父元素禁止延伸到外部的任何内容的显示、内部又由 #son 元素遮挡。。。。”
这样眼睛能看到的，就之 ...
这是常用的障眼法 马黑黑 发表于 2024-6-1 18:21
这个变量是一些算法的依据，否则一旦尺寸改变，你得一个一个数据去修改
是的，这样统一设置方便多了{:4_187:} 红影 发表于 2024-6-1 22:22
是的，这样统一设置方便多了
嗯呐 马黑黑 发表于 2024-6-1 18:21
不完全是。你把 overflow: hidden 去掉，观察效果
去看了，现在知道了，走到转角的时候，是元素逐渐显现的过程，并不是行走过程{:4_173:} 红影 发表于 2024-6-1 22:25
去看了，现在知道了，走到转角的时候，是元素逐渐显现的过程，并不是行走过程
这个要弄成很丝滑的话，需要画很多功夫，里面有设计和精密计算 马黑黑 发表于 2024-6-1 18:22
这是常用的障眼法
如果对行走元素的形状进行设置，也许会看着更顺畅吧。 红影 发表于 2024-6-1 22:35
如果对行走元素的形状进行设置，也许会看着更顺畅吧。
你有空时可以试试 马黑黑 发表于 2024-6-1 23:33
你有空时可以试试
好像不行，毕竟要经过4个角呢，就算转向，仍然后一段到中心的距离带来的麻烦。
页:
[1]
2