纯 CSS 制作的彩虹条纹文字

左手的ㄟ右手 2022-05-25 13:14 245阅读 0赞

## 效果预览 ##

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

[https://codepen.io/comehope/pen/ELpRxj][https_codepen.io_comehope_pen_ELpRxj]点击预览

## 可交互视频教程 ##

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

[https://scrimba.com/c/czrWDfZ][https_scrimba.com_c_czrWDfZ]

## 源代码下载 ##

每日前端实战系列的全部源代码请从 github 下载：

[https://github.com/comehope/front-end-daily-challenges][https_github.com_comehope_front-end-daily-challenges]

## 代码解读 ##

定义 dom，容器中包含文本，并且包含4个 用于特效， 的 data-text 属性值为与文本相同：

web

居中显示：

html, body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: black;
    }

定义文本样式：

.rainbow {
        color: white;
        font-size: 300px;
        text-transform: uppercase;
        font-family: sans-serif;
        font-weight: bold;
        line-height: 1em;
        position: relative;
    }

用伪元素增加图层，形成彩虹效果：

.rainbow span::before,
    .rainbow span::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }
    
    .rainbow span:nth-child(1)::before {
        color: orchid;
        z-index: 1;
        height: calc(100% - 10% * 1);
    }
    
    .rainbow span:nth-child(1)::after {
        color: mediumpurple;
        z-index: 2;
        height: calc(100% - 10% * 2);
    }
    
    .rainbow span:nth-child(2)::before {
        color: deepskyblue;
        z-index: 3;
        height: calc(100% - 10% * 3);
    }
    
    .rainbow span:nth-child(2)::after {
        color: cyan;
        z-index: 4;
        height: calc(100% - 10% * 4);
    }
    
    .rainbow span:nth-child(3)::before {
        color: mediumspringgreen;
        z-index: 5;
        height: calc(100% - 10% * 5);
    }
    
    .rainbow span:nth-child(3)::after {
        color: yellow;
        z-index: 6;
        height: calc(100% - 10% * 6);
    }
    
    .rainbow span:nth-child(4)::before {
        color: gold;
        z-index: 7;
        height: calc(100% - 10% * 7);
    }
    
    .rainbow span:nth-child(4)::after {
        color: tomato;
        z-index: 8;
        height: calc(100% - 10% * 8);
    }

增加动画效果：

.rainbow span::before,
    .rainbow span::after {
        animation: animate 0.8s infinite alternate;
        filter: opacity(0);
    }
    
    @keyframes animate {
        from {
            filter: opacity(0);
        }
    
        to {
            filter: opacity(1);
        }
    }

为图层设置延时，增强动感：

.rainbow span:nth-child(1)::before {
        animation-delay: calc(0.8s - 0.1s * 1);
    }
    
    .rainbow span:nth-child(1)::after {
        animation-delay: calc(0.8s - 0.1s * 2);
    }
    
    .rainbow span:nth-child(2)::before {
        animation-delay: calc(0.8s - 0.1s * 3);
    }
    
    .rainbow span:nth-child(2)::after {
        animation-delay: calc(0.8s - 0.1s * 4);
    }
    
    .rainbow span:nth-child(3)::before {
        animation-delay: calc(0.8s - 0.1s * 5);
    }
    
    .rainbow span:nth-child(3)::after {
        animation-delay: calc(0.8s - 0.1s * 6);
    }
    
    .rainbow span:nth-child(4)::before {
        animation-delay: calc(0.8s - 0.1s * 7);
    }
    
    .rainbow span:nth-child(4)::after {
        animation-delay: calc(0.8s - 0.1s * 8);
    }

最后，把原始文本设置为透明色：

.rainbow {
        color: transparent;
    }

大功告成！

## 知识点 ##

*  content [https://developer.mozilla.org/en-US/docs/Web/CSS/content][https_developer.mozilla.org_en-US_docs_Web_CSS_content]
 *  attr() [https://developer.mozilla.org/en-US/docs/Web/CSS/attr][https_developer.mozilla.org_en-US_docs_Web_CSS_attr]
 *  calc() [https://developer.mozilla.org/en-US/docs/Web/CSS/calc][https_developer.mozilla.org_en-US_docs_Web_CSS_calc]
 *  z-index [https://developer.mozilla.org/en-US/docs/Web/CSS/z-index][https_developer.mozilla.org_en-US_docs_Web_CSS_z-index]

*  :nth-child() [https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child][https_developer.mozilla.org_en-US_docs_Web_CSS_nth-child]

[Fundebug][]提供JavaScript监控，支持所有主流前端框架，微信小程序监控，微信小游戏监控，后端Node.js监控。

![1386816-20180502112633892-1858746955.png][]

您可能感兴趣的

1.  [详解1000+项目数据分析出来的10大JavaScript错误][1000_10_JavaScript]  
    
2.  [10个用Console来Debug的高级技巧][10_Console_Debug]  
    
3.  [Fundebug支持区分Source Map版本][Fundebug_Source Map]  
    
4.  [Debug前端HTML/CSS][Debug_HTML_CSS]

原文链接：https://segmentfault.com/a/1190000014858628

[https_codepen.io_comehope_pen_ELpRxj]: https://codepen.io/comehope/pen/ELpRxj
[https_scrimba.com_c_czrWDfZ]: https://scrimba.com/c/czrWDfZ
[https_github.com_comehope_front-end-daily-challenges]: https://github.com/comehope/front-end-daily-challenges
[https_developer.mozilla.org_en-US_docs_Web_CSS_content]: https://developer.mozilla.org/en-US/docs/Web/CSS/content
[https_developer.mozilla.org_en-US_docs_Web_CSS_attr]: https://developer.mozilla.org/en-US/docs/Web/CSS/attr
[https_developer.mozilla.org_en-US_docs_Web_CSS_calc]: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
[https_developer.mozilla.org_en-US_docs_Web_CSS_z-index]: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
[https_developer.mozilla.org_en-US_docs_Web_CSS_nth-child]: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
[Fundebug]: https://www.fundebug.com/
[1386816-20180502112633892-1858746955.png]: /images/20220525/9cfdb39f57944693b62ea5b599390b85.png
[1000_10_JavaScript]: https://blog.fundebug.com/2018/03/12/top-10-javascript-errors-from-1000-projects/
[10_Console_Debug]: https://blog.fundebug.com/2018/03/19/10-tips-for-debugging-with-console/
[Fundebug_Source Map]: https://blog.fundebug.com/2017/12/26/fundebug-can-distinguish-sourcemap-version/
[Debug_HTML_CSS]: https://blog.fundebug.com/2018/01/02/how-to-debug-frontend-html-css/