原文地址：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. 让VCL的皮肤用在手机程序里 让安桌程序不山寨[转]

    ① 就用那个bitmap设计工具,先打开vcl里的皮肤(..... \Embarcadero\RAD Studio\12.0\Redist\styles\vcl里) ② save as      转换 ...

  2. Python3中Urllib库基本使用

    什么是Urllib? Python内置的HTTP请求库 urllib.request          请求模块 urllib.error              异常处理模块 urllib.par ...

  3. ALGO-126_蓝桥杯_算法训练_水仙花

    问题描述 判断给定的三位数是否 水仙花 数.所谓 水仙花 数是指其值等于它本身 每位数字立方和的数.例 就是一个 水仙花 数. =++ 输入格式 一个整数. 输出格式 是水仙花数,输出"YE ...

  4. appium+python自动化 adb shell按键操作

    前言 接着上篇介绍input里面的按键操作keyevent事件,发送手机上常用的一些按键操作 keyevent 1.keyevent事件有一张对应的表,可以直接发送对应的数字,也可以方式字符串,如下两 ...

  5. 各种http报错的报错的状态码的分析

    HTTP常见错误 HTTP 错误 400 400 请求出错 由于语法格式有误,服务器无法理解此请求.不作修改,客户程序就无法重复此请求. HTTP 错误 401 401.1 未授权:登录失败 此错误表 ...

  6. PHP中常用的数组函数总结

    整理了一份PHP开发中数组操作大全,包含有数组操作的基本函数,数组的分段和填充,数组与栈,数组与列队,回调函数,排序,计算,其他的数组函数等. 一,数组操作的基本函数 数组的键名和值 array_va ...

  7. T-SQL 无参数的存储过程的创建和执行

    use StudentManager go if exists(select * from sysobjects where name='usp_ScoreQuery') drop procedure ...

  8. C# Microsoft.Office不存在空间名称Interop和Excel

    在实际开发过程中,我们经常会对Excel表进行操作.相信大家都都已经很熟悉C#操作Excel的步骤:添加引用->COM->Microsoft Office Excel 11 Object. ...

  9. windows 查询文件被什么程序占用

    运行Resmon CPU选项卡全选 在[关联的句柄]里查询: 需要的时间挺多的...

  10. (转)WebApi返回Json格式字符串

    原文地址:https://www.cnblogs.com/elvinle/p/6252065.html WebApi返回json格式字符串, 在网上能找到好几种方法, 其中有三种普遍的方法, 但是感觉 ...