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

posted on
2019-03-31 11:31
人生与戏 阅读(
...) 评论(
...)
编辑
收藏

转载于:https://www.cnblogs.com/FlyingLiao/p/10630650.html

原文链接：https://blog.csdn.net/weixin_30342827/article/details/96068020

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。