CSS+HTML
2020-04-22 本文已影响0人
誰在花里胡哨
效果图：
image.png
不太理解 css属性 stroke-dasharray，stroke-dashoffset 的，可参考 这篇文章
知识点：
1. <symbol> 和 <use> 的配合使用
定义 id="s-text"，引入xlink:href="#s-text"，这样就可以针对 <text> 引入多重效果，以便于实现多个色彩边框的效果
<svg width="100%" height="100">
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="70%">Text Border</text>
</symbol>
<use class="text_use t1" xlink:href="#s-text"></use>
<use class="text_use t2" xlink:href="#s-text"></use>
<use class="text_use t3" xlink:href="#s-text"></use>
</svg>
🎈可以配合使用 animation，实现以下效果
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: #f1f1f1;
}
svg {
cursor: pointer;
}
svg:hover .text {
fill: #d3d3d3;
}
.text {
font-size: 60px;
font-weight: bold;
stroke-width: 2;
fill: transparent;
stroke: rgb(0, 0, 0);
letter-spacing: 0.5rem;
transition: 0.3s;
}
.text.t2 {
/* stroke-linejoin 圆角 */
stroke-linejoin: round;
stroke-dasharray: 10;
}
.text.t3 {
stroke-linejoin: round;
stroke-dasharray: 10;
stroke-dashoffset: 0;
animation: dong3 3s linear infinite;
}
.text.t4 {
stroke-dasharray: 10 400;
animation: dong4 3s linear infinite;
}
@keyframes dong3 {
100% {
stroke-dashoffset: 400;
}
}
@keyframes dong4 {
100% {
stroke-dasharray: 400 0;
}
}
.text_use {
font-size: 60px;
font-weight: bold;
stroke-width: 2;
fill: transparent;
letter-spacing: 0.5rem;
stroke-dasharray: 30 30;
animation: dong5 3s linear infinite;
}
.text_use.t1 {
animation-delay: -1s;
stroke: rgb(219, 56, 56);
}
.text_use.t2 {
animation-delay: -0.2s;
stroke: rgb(65, 209, 149);
}
.text_use.t3 {
animation-delay: -0.1s;
stroke: rgb(127, 52, 224);
}
@keyframes dong5 {
100% {
stroke-dashoffset: -300;
}
}
</style>
</head>
<body>
<svg width="100%" height="100" style="margin-top:5%">
<text class="text" text-anchor="middle" x="50%" y="70%">Text Border</text>
</svg>
<svg width="100%" height="100">
<text class="text t2" text-anchor="middle" x="50%" y="70%">Text Border</text>
</svg>
<svg width="100%" height="100">
<text class="text t3" text-anchor="middle" x="50%" y="70%">Text Border</text>
</svg>
<svg width="100%" height="100">
<text class="text t4" text-anchor="middle" x="50%" y="70%">Text Border</text>
</svg>
<svg width="100%" height="100">
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="70%">Text Border</text>
</symbol>
<use class="text_use t1" xlink:href="#s-text"></use>
<use class="text_use t2" xlink:href="#s-text"></use>
<use class="text_use t3" xlink:href="#s-text"></use>
</svg>
</body>
</html>
