CSS实现动态文字效果

最终效果截图（静态）：

HTML代码：

CSS代码：

.text {
			font: 5em/1 Arial Rounded MT Bold;
  			text-transform: uppercase;
			fill: none;
			stroke-width: 3;
			stroke-linejoin: round;
			stroke-dasharray: 70 330;
			stroke-dashoffset: 0;
			animation: stroke 6s infinite;
		}
		.text:nth-child(5n + 1) {
		  stroke: #9fa8da;
		  animation-delay: -1.5s;
		}
		.text:nth-child(5n + 2) {
		  stroke: #9fa8da;
		  animation-delay: -3s;
		}
		.text:nth-child(5n + 3) {
		  stroke: #7986cb;
		  animation-delay: -4.5s;
		}
		.text:nth-child(5n + 4) {
		  stroke: #5c6bc0;
		  animation-delay: -6s;
		}
		.text:nth-child(5n + 5) {
		  stroke: #3f51b5;
		  animation-delay: -7.5s;
		}
		@keyframes stroke {
		  100% {
		    stroke-dashoffset: -400;
		  }
		}

参考链接：

https://blog.csdn.net/yan_lychee/article/details/80222714