原文地址：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. postgresql 查看数据库,表,索引,表空间以及大小

    转载 http://blog.51yip.com/pgsql/1525.html 1,查看数据库 playboy=> \l //\加上字母l,相当于mysql的,mysql> show d ...

  2. 【mongodb】之安装

    export PATH=/opt/mongodb64-3.4.10/bin:$PATHmongod --dbpath data --logpath logs/mongo.log --fork

  3. 算法：整数与ip地址转换

    直接上代码(不要直接拷贝,中间少了一行啊):   #include <string>   #include <iostream>   using namespace std; ...

  4. （转载）关于java多线程web服务器 以及相关资料转载

    1.自己实现的简单的java多线程web服务器: https://blog.csdn.net/chongshangyunxiao321/article/details/51095149 自己实现一个简 ...

  5. chrome不好用

    (也是写于很久很久以前) 因为工作的某些原因,我本来想换Google chrome作为默认浏览器,真正用它的时候,才发现它一点都不好用,首先它很多网站不支持或显示不完整,比如新浪邮箱,打开新浪邮箱只显 ...

  6. Hive学习笔记一

    1. Load的使用 //在1.x版本中定义long数据类型会报错(用bigint代替) create table t_load_stu(name string,age bigint) row for ...

  7. echo() print() printf() print_r() 的区别

    echo是一个语言结构而非函数,因此它无法被变量函数调用, print和print_r是函数,语句没有返回值,函数可以有返回值(即便没有用) print()    只能打印出简单类型变量的值(如int ...

  8. Win7 无法访问Installer服务

    还原系统后,卸载程序时,系统提示"无法访问Windows Installer服务" 一. 可能原因: msi.dll相关的组件未注册: 未开启windows installer服务 ...

  9. vi/vim 光标移动命令（转载）

    转载至:https://www.cnblogs.com/Jacklovely/p/6015037.html vi/vim 光标移动命令 移动光标上:k nk:向上移动n行 9999k或gg可以移到第一 ...

  10. Java中常见流的分类及简单讲解

    流在Java中是指计算中流动的缓冲区. 从外部设备流向中央处理器的数据流成为“输入流”,反之成为“输出流”. 字符流和字节流的主要区别: 1.字节流读取的时候,读到一个字节就返回一个字节:字符流使用了 ...