59.纯 CSS 创作彩虹背景文字

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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

感想：又一次见识到CSS的强大之处，当然MDN文档也是666；

HTML code：

<p>thanks</p>

CSS code：

html, body {

    margin:;

    padding:;

}

/* 设置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;

    }

}