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& ...
随机推荐
- ByteType字符串中判断是否英文
ByteType('123你好吗',1)=mbSingleByte//单字节ByteType('123你好吗',4)=mbLeadByte//双字节字符的第一个字符ByteType('123你好吗', ...
- window7环境MySql5.7 zip安装配置教程
1.将zip压缩包解压到一个目录下,并改名为mysql5.7 我的是放在D:\web\mysql5.7下 2.修改my-default.ini文件 下面几项是必填的,否则无法启动 basedir = ...
- 【java】之获取HTTP请求的值常用方法
logger.info("销帐完成通知回调,请求URL:"+req.getRequestURI().toString()); InputStream in = req.getInp ...
- tomcat操作
一.启动 D:\tomcat8.5.9\bin\startup 或者 D:\tomcat8.5.9\bin\catalina start 关闭tomcat: D:\tomcat8.5.9\bin ...
- pj1--学生信息管理系统
1.根据班上的情况做一个班级学生信息管理系统.包含功能有每日签到.学分管理.个人信息管理 2.要求:用winform+序列化(本地化)的技术实现,以教师机做服务器,要有文件保存.读取.还要有上传头像功 ...
- ueditor 正在读取目录
ueditor 版本为1.3.6 项目版本为2.0 引用 <script src="../ueditor/ueditor.config.js" type="tex ...
- Jmeter（十六）Logic Controllers 之 Runtime Controller
Runtime Controller-----运行时间控制器:控制其下的Sampler运行时间. 该控制器较为简单,官方文档也没作太多说明.照着Blazemeter写个例子: 运行,查看结果. 可以看 ...
- [UE4]爆头和穿墙
一.LineTracebyChannel的Out Hit值展开后有一个名为“Hit Bone Name”(击中的骨骼名称),以此来判断击中的是否是头部,进而实现爆头的目的(爆头:高伤害,一枪毙命) 二 ...
- [UE4]透明按钮
Background Color的透明度设置为0,就能让按钮背景完全透明,但是按钮里面的子控件并不会跟着透明
- win下使用git-bash工具进行ssh免密登录服务器
1.ssh-keygen.exe 生成公钥私钥(.pub) 2.ssh-agent.exe bash 指定工具 3.ssh-add.exe **** 添加私钥 OK