vue 炫酷文字

C20611

已于 2022-04-01 00:34:44 修改

阅读量1.1k

点赞数 2

分类专栏： vue 文章标签： vue

于 2022-04-01 00:32:00 首次发布

原文链接：http://t.csdn.cn/5nS2P

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

html

<div class="container">
    <svg viewBox="0 0 1000 300">
      <symbol id="line-text">
        <text text-anchor="middle" x="50%" y="50%" dy=".4em">
          Microgoople
        </text>
      </symbol>
      <use xlink:href="#line-text" class="text"></use>
      <use xlink:href="#line-text" class="text"></use>
      <use xlink:href="#line-text" class="text"></use>
      <use xlink:href="#line-text" class="text"></use>
    </svg>
  </div>

css

* {
  padding: 0;
  margin: 0;
}

body {
  background-color: rgb(41, 45, 62);
}

.container {
  font-size: 120px;
  font-weight: bold;
  text-transform: uppercase;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.text {
  fill: none;
  stroke-width: 5;
  stroke-dasharray: 0 240;
  stroke-dashoffset: 0;
}

.text:nth-child(4n + 1) {
  stroke: rgb(39, 135, 238);
  animation: text1 4s ease-in-out forwards;
}
.text:nth-child(4n + 2) {
  stroke: rgb(47, 169, 92);
  animation: text2 4s ease-in-out forwards;
}
.text:nth-child(4n + 3) {
  stroke: rgb(249, 189, 56);
  animation: text3 4s ease-in-out forwards;
}
.text:nth-child(4n + 4) {
  stroke: rgb(235, 61, 50);
  animation: text4 4s ease-in-out forwards;
}

@keyframes text1 {
  100% {
    stroke-dashoffset: 1000;
    stroke-dasharray: 60 180;
  }
}

@keyframes text2 {
  100% {
    stroke-dashoffset: 1060;
    stroke-dasharray: 60 180;
  }
}

@keyframes text3 {
  100% {
    stroke-dashoffset: 1120;
    stroke-dasharray: 60 180;
  }
}

@keyframes text4 {
  100% {
    stroke-dashoffset: 1180;
    stroke-dasharray: 60 180;
  }
}