它应该是一个单独的div吗？ 我不知道如何将此应用到一个已经有一些内容的div中。
null
.dashed-line {
height: 3px;
width: 700px;
background: linear-gradient(90deg, red 50%, transparent 50%), linear-gradient(90deg, red 50%, transparent 50%);
background-size: 0px 0px, 15px 4px, 4px 0px, 4px 0px;
background-position: 0px 0px, 200px 100px, 0px 100px, 200px 0px;
margin-left: 15px;
animation: border-dance 7s infinite linear;
}
@keyframes border-dance {
0% {
background-position: 300px 0px, 0px 116px, 0px 0px, 216px 150px;
}
100% {
background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px;
}
}<div class="dashed-line"></div>null
您可以使用更简单的语法来完成此操作:
null
.box {
--p:10px; /* width of the pattern */
--w:4px; /* width of the gap inside the pattern */
--h:3px; /* height of line */
padding: 8px;
font-size:20px;
display: inline-block;
background:
linear-gradient(90deg, red calc(100% - var(--w)), transparent 0)
0 100% / var(--p) var(--h) repeat-x;
animation: move 0.3s linear infinite;
}
@keyframes move {
to {
background-position: var(--p) 100%;
}
}<div class="box">
some text
</div>
这种情况下伪元素::before和::after特别适合。
基本上，它们允许您向页面添加不是实际“内容”的元素。 它可以是通过contentcss属性进行的一些文本修饰。 或者，您可以将该属性保留为空字符串“，并利用在节点中添加了”pseudo-div“这一事实。
null
span {
position: relative;
}
span::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 100%;
background: linear-gradient(90deg, red 50%, transparent 50%), linear-gradient(90deg, red 50%, transparent 50%);
background-size: 0px 0px, 15px 4px, 4px 0px, 4px 0px;
background-position: 0px 0px, 200px 100px, 0px 100px, 200px 0px;
animation: border-dance 7s infinite linear;
}
@keyframes border-dance {
0% {
background-position: 300px 0px, 0px 116px, 0px 0px, 216px 150px;
}
100% {
background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px;
}
}<span> hello i have some content </span>