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

最新推荐文章于 2024-03-08 22:24:47 发布

anfuye3276

最新推荐文章于 2024-03-08 22:24:47 发布

阅读量122

点赞数

原文链接：http://www.cnblogs.com/FlyingLiao/p/10630650.html

版权

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: 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;
    }
}