原文地址：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. mha error

    MasterFailover.pm 1473 $ret =1474 $_server_manager->change_master_and_start_slave( $target, $late ...

  2. WPF动态时间(电子表)

    private DispatcherTimer dispatcherTimer; public MainWindow() { InitializeComponent(); dispatcherTime ...

  3. STL进阶--删除元素

    删除元素 从vector或deque删除元素 vector<int> vec = {1, 4, 1, 1, 1, 12, 18, 16}; // 删除所有的1 for (vector< ...

  4. Lucene 特殊字符的问题

    SolrQuerySyntax http://wiki.apache.org/solr/SolrQuerySyntax solr的处理方式: https://svn.apache.org/repos/ ...

  5. 【问题解决】使用docker配置redis主从复制，不生效

    不生效,解决 原因1:修改 bind 原因2: Slave即的db save失败,因为没有写权限

  6. vue之后台管理系统遇到的几个痛点

    杂七杂八的一些日总结 1.vue(最)合理的处理表单提交和初始化表单数据显示的方式 对于表单处理,繁琐的一个地方就是当出现多个下拉选择的表单框的时候,我们需要进行多次将选择的文本去换对应的id值的操作 ...

  7. Hadoop概念学习系列之Hadoop新手学习指导之入门需知（二十）

    不多说,直接上干货! 零基础学习hadoop,没有想象的那么困难,也没有想象的那么容易.从一开始什么都不懂,到能够搭建集群,开发.整个过程,只要有Linux基础,虚拟机化和java基础,其实hadoo ...

  8. scala 基本类型和操作

    Scala基本类型 Scala中的基本数据类型如下图:  (来源:Programming in scala) 从上表中可以看出,Scala的基本数据类型与Java中的基本数据类型是一一对应的,不同的是 ...

  9. Java学习---流与文件

    实验10  流与文件操作 一.实验目的 理解和掌握JAVA程序中实现输入/输出的技术和有关的类与方法. 二.实验要求 掌握File类常用的方法 掌握标准数据流及Scanner类的应用. 掌握文件输入输 ...

  10. 使用jquery方法的时候，要注意对象是哪个，否则很容易出错

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>W3Cs ...