html - 蛇形边框动画
问题描述
我一直在尝试创建一个看起来像附加图像中的边框动画。所以基本上,亮蓝色的线会围绕盒子旋转。线条也应该是 3px,而实际边框是 1px。我尝试了一些在 Codepen 上找到的解决方案,并试图让它们适用于我的情况。但是没有一个 CSS 解决方案起作用。
我还尝试了其他一些想法,比如有 4 个不同的绝对定位跨度,每个跨度都有一个 before 元素,它将根据 previews 元素的位置进行动画处理。但这只是一团糟(也不起作用)。
纯 CSS 似乎不可能做到这样的事情?我已经尝试完成这项工作将近 2 天了,但没有一个解决方案能按预期工作。以前有人做过类似的事情吗?我是否需要将其制作为动画 SVG 才能工作?任何帮助深表感谢。
解决方案
由于边界正好由两个单独的线段组成,::before
并且::after
可能足以做到这一点!
这总体上是一个搞砸的问题@keyframes
。以下示例显示:
- 最左边:只有
::before
,“头”元素显示 - 中间:只有
::after
,“尾巴”元素显示 - 最右边:两个伪元素;这是最终结果
body { background-color: #000000; }
.ex1, .ex2, .ex3 {
display: inline-block;
width: 150px; height: 150px;
margin: 0 20px;
}
.ex1.snake-border::after { content: none; }
.ex2.snake-border::before { content: none; }
/* snake-border stuff: */
@keyframes snake-border-head {
/*
The snake's "head" stretches across a side of its container.
The moment this head hits a corner, it instantly begins to
stretch across the next side. (This is why some keyframe
moments are repeated, to create these instantaneous jumps)
*/
90% { left: 0; top: 0; width: 0; height: 40%; }
90% { left: 0; top: 0; width: 0; height: 0; }
100% { left: 0; top: 0; width: 40%; height: 0; } 0% { left: 0; top: 0; width: 40%; height: 0; }
15% { left: 60%; top: 0; width: 40%; height: 0; }
15% { left: 100%; top: 0; width: 0; height: 0; }
25% { left: 100%; top: 0; width: 0; height: 40%; }
40% { left: 100%; top: 60%; width: 0; height: 40%; }
40% { left: 100%; top: 100%; width: 0; height: 0; }
50% { left: 60%; top: 100%; width: 40%; height: 0; }
65% { left: 0; top: 100%; width: 40%; height: 0; }
65% { left: 0; top: 100%; width: 0; height: 0; }
75% { left: 0; top: 60%; width: 0; height: 40%; }
}
@keyframes snake-border-tail {
/*
The "tail" of the snake is at full length when the head is at 0
length, and vice versa. The tail always at a 90 degree angle
from the head.
*/
90% { top: 0%; height: 40%; }
100% { left: 0; top: 0; width: 0; height: 0; } 0% { left: 0; top: 0; width: 0; height: 0; }
15% { width: 40%; }
25% { left: 100%; top: 0; width: 0; height: 0; }
40% { height: 40%; }
50% { left: 100%; top: 100%; width: 0; height: 0; }
65% { left: 0%; width: 40%; }
75% { left: 0; top: 100%; width: 0; height: 0; }
}
.snake-border {
position: relative;
box-shadow: inset 0 0 0 1px #00a0ff;
}
.snake-border::before, .snake-border::after {
content: '';
display: block;
position: absolute;
outline: 3px solid #00a0ff;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.snake-border::before { animation-name: snake-border-head; }
.snake-border::after { animation-name: snake-border-tail; }
<div class="ex1 snake-border"></div>
<div class="ex2 snake-border"></div>
<div class="ex3 snake-border"></div>
我使用方形容器完成了这项工作,并假设蛇的总长度是方形边长的 40%。如果你想使用矩形容器,或者一个绝对长度的蛇沿着动态大小的容器移动,你将不得不摆弄这些值。
推荐阅读
- python - 如何使用多线程在 Python 中基于每秒和每个请求对 API 调用进行排队和限制?
- jenkins - 调度参数化构建
- material-ui - Material-UI 付费模板
- cpanel - 如何将文件从子域移动到另一个域
- php - PHP 从 MySQL 数据库中选择员工并转换为 JSON
- css - 我必须在 CSS 中选择一个 div 类
- python - docker-registry - 来自 python 的 PUT 请求以 400 响应,但 Curl 工作正常
- javascript - 如何按固定因子缩放 Gatsby 图像?
- javascript - 传递具有动态名称的道具以响应子组件
- elasticsearch - 使用通配符搜索多个字段的 Elastic Search 完全匹配查询