前端练习（2）- 渐变色

开发工具：Atom

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Animation Test</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <div class="text">
    Hello World!
  </div>
  </body>
</html>

style.css

body{
  margin: 0;
  padding: 0;
  font-family: "Anonymous Pro";
  background-image: linear-gradient(135deg,#e74c3c,#e67e22,#f1c40f,#2ecc71,#3498db,#9b59b6);
  background-size: 1600% 900%;
  animation: bganimation 18s infinite;
}
.text{
  color: white;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  margin: 350px 0;
  font-size: 22px;
  width: 100%;
  height: 100%;
}

@keyframes bganimation {
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

效果演示!

教程来自:DarkCode(Youtube).
原教程代码已知问题:Chrome异常（显示分块色块）；Edge/IE正常。
源代码已基本修复: Chrome正常；Edge/IE正常 。