原文地址：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. SpringMVC-DispatcherServlet配置（Spring-servlet.xml）

    Spring-servlet.xml <context:component-scan base-package="com.spring.mvc.controller"/> ...

  2. 黄聪：安装cnpm替代默认的npm

    使用cnpm替代默认的npm: npm install -g cnpm --registry=https://registry.npm.taobao.org

  3. DS哈希查找--线性探测再散列

    题目描述 定义哈希函数为H(key) = key%11.输入表长(大于.等于11),输入关键字集合,用线性探测再散列构建哈希表,并查找给定关键字. --程序要求-- 若使用C++只能include一个 ...

  4. pytest学习笔记

    From: https://blog.csdn.net/gaowg11/article/details/54910974 由于对测试框架了解比较少,所以最近看了下pytest测试框架,对学习心得做个记 ...

  5. ssh调试及指定私钥

    1.ssh调试 ssh -vT username@ip[or hostname] T表示测试,v显示详细信息 也可以配置config文件(在~/.ssh/config)指定用户名和密码 如 [gerr ...

  6. C++进阶--Named Parameter Idiom

    //############################################################################ /* Named Parameter Id ...

  7. 廖雪峰Java3异常处理-2断言和日志-1使用断言

    1.断言 断言Assertion是一种程序调试方式 使用assert关键字 断言条件预期为true 如果断言失败,抛出AssertionError,停止程序 可选的断言消息,断言失败,就会抛出 pub ...

  8. folly无锁队列正确性说明

    folly无锁队列是facebook开源的一个无所队列,使用的是单向链表,通过compare_exchange语句实现的多生产多消费的队列,我曾经花了比较多的时间学习memory_order的说明,对 ...

  9. go语言学习--指针的理解

    Go 的原生数据类型可以分为基本类型和高级类型,基本类型主要包含 string, bool, int 及 float 系列,高级类型包含 struct,array/slice,map,chan, fu ...

  10. centos6.5虚拟机快照技术

    一.查看现有磁盘镜像格式与转换 查看磁盘格式 [root@localhost ~]# qemu-img info /var/lib/libvirt/images/centos7.img image: ...