原文地址：https://segmentfault.com/a/1190000015352436

修改後地址：https://scrimba.com/c/cqK3LaTQ

感想： 又一次見識到CSS的強大之處，當然MDN文檔也是666；

HTML code：

<p>thanks</p>

CSS code：

html, body {
    margin: 0;
    padding: 0;
}
/* 設置body的子元素水平垂直居中 */
body {
    height: 100vh;
    display: flex;
    justify-content
 
: center;
    align-items: center;
    background-color: black;
}
/* 設置p中文字樣式 */
p{
    color: white;
    /* 1. font 文檔地址： http://www.w3school.com.cn/cssref/pr_font_font.asp ；
    *  2.vw : 視口寬度 , vh : 視口高度 ；
    */
    font: bold 20vw sans-serif;
    text-transform: uppercase;
    /* 設置彩虹背景 */
    background-image
 
: linear-gradient(
        to right,
        orangered,
        orange,
        gold,
        lightgreen,
        cyan,
        dodgerblue,
        mediumpurple,
        hotpink,
        orangered
    );
    background-size: 110vw;
    /* 添加動畫 sliding: 滑行的 */
    animation: sliding 30s linear infinite
 
;
    /* 將背景顏色賦值給文字，文檔地址： https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip 
        1、-moz代表firefox瀏覽器私有屬性
        2、-ms代表ie瀏覽器私有屬性
        3、-webkit代表safari、chrome私有屬性
    */
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
@keyframes sliding {
    to {
        background-position: -2000vw;
    }
}

59.純 CSS 創作彩虹背景文字