如何使关键帧翻译动画无缝？
我试着用两个字母来画一个标志的边框。我不知道如何动画的边界，我的标志，所以我采取了创建4个div与不同的边界(顶，下，左，右)，并动画他们一个一个。但是，动画并不是无缝的，因为它不断地回到原来的位置，而且我创建的div包装器不能包含外部的动画溢出。
我是新的css动画，所以我想知道是否有一种方法，使一个动画，移动虚线的标志。
这是我的小提琴 (第一次使用jsfiddle，所以如果链接不工作，请告诉我)
/* div border for top */
.logo-border-up {
background-color: transparent;
border-top: 10px dashed #252422;
width: 5rem;
height: 10px;
position: absolute;
animation: animate-up 1s linear infinite;
}
@keyframes animate-up {
0% {
transform: translatex(0%);
}
100% {
transform: translatex(100%);
}编辑:我设法解决了这个问题。多亏了这个堆栈溢出css3动画中虚线边框动画
Stack Overflow用户
发布于 2022-07-18 11:57:02
由于移动边框只是视觉线索，而不是内容的一部分，这里有一个片段，它使用伪元素来绘制和动画它，而不是将额外的元素放入DOM中。
直线梯度是用来绘制背景图像的破折号，这是重复在水平或垂直方向，视情况。
然后，使用CSS关键帧将背景位置动画化。
前后伪元素的大小略大于包装器，并将其定位，因此边框略在外部。
徽标字符使用flex在包装器中居中。
对破折号的调整是相对于包装器的大小进行的，而不是混合px和rem值，这会使事情比较难以调整(例如，可以更改rem)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Logo</title>
<style>
body {
background-color: #FFFCF2;
}
.logo-wrapper {
width: 5rem;
aspect-ratio: 1 / 1;
roverflow: hidden;
position: relative;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.logo {
font-family: 'Poppins', sans-serif;
font-size: 3rem;
text-decoration: none;
font-weight: 700;
color: #252422;
/* border: 0.5rem dashed #252422; */
}
.logo-wrapper::before,
.logo-wrapper::after {
content: '';
position: absolute;
top: -5%;
left: -5%;
width: 110%;
aspect-ratio: 1 / 1;
overflow: hidden;
animation: var(--name) 2s linear infinite;
}
.logo-wrapper::before {
background-image: linear-gradient(to right, #252422 0 50%, transparent 50% 100%), linear-gradient(to right, transparent 0 50%, #252422 50% 100%);
background-size: 25% 6.25%;
background-repeat: repeat no-repeat;
background-position: 0 0, 100% 100%;
--name: horizMove;
}
.logo-wrapper::after {
background-image: linear-gradient(#252422 0 50%, transparent 50% 100%), linear-gradient(transparent 0 50%, #252422 50% 100%);
background-size: 6.25% 25%;
background-repeat: no-repeat repeat;
background-position: 100% 0, 0 100%;
--name: vertMove;
}
@keyframes horizMove {
0% {
background-position: 0 0, 100% 100%;
}
100% {
background-position: 100% 0, 0 100%;
}
}
@keyframes vertMove {
0% {
background-position: 100% 0, 0 100%;
}
100% {
background-position: 100% 100%, 0 0;
}
}
/*
.logo-border-up {
background-color: transparent;
border-top: 10px dashed #252422;
width: 5rem;
height: 10px;
position: absolute;
animation: animate-up 1s linear infinite;
}
*/
@keyframes animate-up {
0% {
transform: translatex(0%);
}
100% {
transform: translatex(100%);
}
}
@keyframes animate-down {
0% {
transform: translatex(0%);
}
100% {
transform: translatex(-100%);
}
}
</style>
</head>
<body>
<nav>
<div class="logo-wrapper">
<div class="logo-border-up"></div>
<a href="" class="logo">bt</a>
</div>
</nav>
</body>
</html>
注意:设置所有背景颜色，如在问题中给出的代码中所做的，可能会导致意外的结果。这个片段已经删除了，并将背景色放置在身体上。
https://stackoverflow.com/questions/73018879
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号