CSS+SVG你好世界 | 码农工具

​x
 
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
  <link rel="stylesheet" type="text/css" href="s-text.css">
</head>
<body>
  <svg viewBox="0 0 1320 300">
  <!-- Symbol -->
  <symbol id="s-text">
    <text text-anchor="middle"
          x="50%" y="50%" dy=".35em">
      你好,世界！    </text>
  </symbol>  
  <!-- Duplicate symbols -->
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>
</svg>
</body>
</html>

HTML

xxxxxxxxxx
 
/* Main styles */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
​
.text {
  fill: none;
  stroke-width: 5;
  stroke-dasharray: 0 300;
  stroke-dashoffset: 0;
}
​
.text:nth-child(3n + 1) {
  stroke: #FFFFFF;
    animation: stroke 10s  ease-in-out forwards;  
​
}
.text:nth-child(3n + 2) {
  stroke: #808080;
animation: stroke1 10s  ease-in-out forwards;
​
}
​
.text:nth-child(3n + 3) {
  stroke: #696969;
animation: stroke2 10s  ease-in-out forwards;
​
}
​
​
@keyframes stroke {
  100% {
    stroke-dashoffset: 1000;
    stroke-dasharray: 80 160;
  }
}
​
@keyframes stroke1 {
  100% {
    stroke-dashoffset: 1080;
    stroke-dasharray: 80 160;
  }
}
​
​
@keyframes stroke2 {
  100% {
    stroke-dashoffset: 1160;
    stroke-dasharray: 80 160;
  }
}
/* Other styles */
html, body {
  height: 100%;
}
​
body {
  background: #000000;
  background-size: .2em 100%;
  font: 14.5em/1 Open Sans, Impact;
  text-transform: uppercase;
  margin: 0;
}
​
svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

CSS