22.纯 CSS 创作出美丽的彩虹条纹文字
原文地址：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 创作出美丽的彩虹条纹文字的更多相关文章
- 27.纯 CSS 创作一个精彩的彩虹 loading 特效
原文地址:https://segmentfault.com/a/1190000014939781 感想:正方形->圆->旋转一定角度->动画->隐藏下一半 HTML代码: &l ...
- 24.纯 CSS 创作出平滑的层叠海浪特效
原文地址:https://segmentfault.com/a/1190000014895634 感想:这里的波浪只是侧面的,利用几个平面一部分弧旋转得到. HTML代码: <div class ...
- 如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教 ...
- 前端每日实战：27# 视频演示如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作出平滑的层叠海浪特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/JvmBdE 可交互视频教 ...
- 前端每日实战：24# 视频演示如何用纯 CSS 创作出平滑的层叠海浪特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/JvmBdE 可交互视频教程 此视频 ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
随机推荐
- 获取 TUniConnection.SpecificOptions默认值和下拉框列表值
TUniConnection的SpecificOptions参数决定了数据库连接配置参数,但可惜的是,SpecificOptions设计器界面,Devart公司只能让它在设计期配置! Specific ...
- XE5开发Android程序调用电话相关功能(短信息和电话)
方法a.不使用Intent而是直接发短信. smsManager对应的Delphi代码应该是: uses Androidapi.JNI.JavaTypes,Androidapi.JNI.Telepho ...
- Java学习——包及可见性
1.在同一个类中:创建的对象,不管成员的可见修饰符可以直接调用. package studentpackage; public class Student { public long id; prot ...
- MVC 访问静态页面 View 下面放JS
http://blog.csdn.net/qq_17255515/article/details/53293120
- Linux双网卡绑定
Linux双网卡绑定 作者:Eric 微信:loveoracle11g eth0和eth1绑定为bond0 [root@rac-node1 ~]# cat /etc/sysconfig/network ...
- 主机、Docker时间与时区设置总结
最近在使用Docker容器时,部署java程序发现时间输出不对,在修改问题时总结如下. #date [-R] #查看主机时间 #timedatectl #查看主机时区 #tzselect ...
- SQL SERVER 事务相关
1 准备数据 及 涉及到的几个设置 SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED --设置事务会话的隔离等级(默认值为 READ UNCOMMIT ...
- 梯度下降（Gradient Descent）相关概念
梯度,直观理解: 梯度: 运算的对像是纯量,运算出来的结果会是向量在一个标量场中, 梯度的计算结果会是"在每个位置都算出一个向量,而这个向量的方向会是在任何一点上从其周围(极接近的周围,学过 ...
- kafka producer实例
1. 定义要发送的消息User POJO package lenmom.kafkaproducer; public class User { public String name; public in ...
- boost 学习笔记 2: timer
boost 学习笔记 2: timer copy from:http://einverne.github.io/post/2015/12/boost-learning-note-2.html 1:ti ...