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

感想： 利用四个span的::before 和 ::after创出多个WEB，给其颜色，绝对定位，再利用z-index: n；突出显示的优先级。

HTML代码：

<html>

    <head>

        <link rel="stylesheet" href="index.css">

    </head>

    <body>

        <p class="rainbow">

            web

            <span data-text="web"></span>

            <span data-text="web"></span>

            <span data-text="web"></span>

            <span data-text="web"></span>

        </p>

    </body>

</html>

CSS代码：

html, body {

    margin:;

    padding:;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: 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:;

    left:;

    overflow: hidden;

}

.rainbow span:nth-child(1)::before {

    color: orchid;

    z-index:;

    height: calc(100% - 10% * 1);

}

.rainbow span:nth-child(1)::after {

    color: mediumpurple;

    z-index:;

    height: calc(100% - 10% * 2);

}

.rainbow span:nth-child(2)::before {

    color: deepskyblue;

    z-index:;

    height: calc(100% - 10% * 3);

}

.rainbow span:nth-child(2)::after {

    color: cyan;

    z-index:;

    height: calc(100% - 10% * 4);

}

.rainbow span:nth-child(3)::before {

    color: mediumspringgreen;

    z-index:;

    height: calc(100% - 10% * 5);

}

.rainbow span:nth-child(3)::after {

    color: yellow;

    z-index:;

    height: calc(100% - 10% * 6);

}

.rainbow span:nth-child(4)::before {

    color: gold;

    z-index:;

    height: calc(100% - 10% * 7);

}

.rainbow span:nth-child(4)::after {

    color: tomato;

    z-index:;

    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;

}

22.纯 CSS 创作出美丽的彩虹条纹文字的更多相关文章

  1. 27.纯 CSS 创作一个精彩的彩虹 loading 特效

    原文地址:https://segmentfault.com/a/1190000014939781 感想:正方形->圆->旋转一定角度->动画->隐藏下一半 HTML代码: &l ...

  2. 24.纯 CSS 创作出平滑的层叠海浪特效

    原文地址:https://segmentfault.com/a/1190000014895634 感想:这里的波浪只是侧面的,利用几个平面一部分弧旋转得到. HTML代码: <div class ...

  3. 如何用纯 CSS 创作一个精彩的彩虹 loading 特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教 ...

  4. 前端每日实战：27# 视频演示如何用纯 CSS 创作一个精彩的彩虹 loading 特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教程 此视频 ...

  5. 如何用纯 CSS 创作出平滑的层叠海浪特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/JvmBdE 可交互视频教 ...

  6. 前端每日实战：24# 视频演示如何用纯 CSS 创作出平滑的层叠海浪特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/JvmBdE 可交互视频教程 此视频 ...

  7. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  8. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  9. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

随机推荐

  1. VS中生成时“sgen.exe”已退出,代码为 1解决办法

    visual studio 2010 选定web项目,右键选择“属性”—“生成”,将“生成序列化程序集”设成“关闭”. 原理分析: sgen是XML序列化程序生成器工具. 可能是这个项目里面有xml序 ...

  2. Gradle详细解析***

    前言 对于Android工程师来说编译/打包等问题立即就成痛点了.一个APP有多个版本,Release版.Debug版.Test版.甚至针对不同APP Store都有不同的版本.在以前ROM的环境下, ...

  3. PREV-3_蓝桥杯_带分数

    问题描述 100 可以表示为带分数的形式:100 = 3 + 69258 / 714. 还可以表示为:100 = 82 + 3546 / 197. 注意特征:带分数中,数字1~9分别出现且只出现一次( ...

  4. STL基础--算法（不修改数据的算法）

    不修改数据的算法 count, min and max, compare, linear search, attribute // 算法中Lambda函数很常用: num = count_if(vec ...

  5. C++进阶--解谜operator new/delete

    //############################################################################ // 解谜operator new/del ...

  6. Excel中输入1时单元格显示为勾

    如图:

  7. python-selenium并发执行测试用例(方法一 各模块每一条并发执行)

    总执行代码: # coding=utf-8import unittest,os,timeimport HTMLTestRunnerimport threadingimport syssys.path. ...

  8. Java学习——Applet画8个同心圆

    import java.awt.*; import java.applet.*; public class GUI3 extends Applet{ public void paint(Graphic ...

  9. [转][JS]修改链接中的参数

    转自:https://blog.csdn.net/weixin_40845192/article/details/81561644 /** * url地址修改 * @param url 待修改url ...

  10. JAVA虚拟机关闭钩子(Shutdown Hook)

    程序经常也会遇到进程挂掉的情况,一些状态没有正确的保存下来,这时候就需要在JVM关掉的时候执行一些清理现场的代码.JAVA中的ShutdownHook提供了比较好的方案. JDK提供了Java.Run ...