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& ...
随机推荐
- Thinkphp 缓存和静态缓存局部缓存设置
1.S方法缓存设置 if(!$rows = S('indexBlog')){ //*$rows = S('indexBlog') $rows = D('blog')->select(); S(' ...
- Gradle Java Web应用程序并在Tomcat上运行
1- 创建Gradle工程 打开 Eclipse ,在菜单中找到 File -> New -> Other…,在打开界面中选择 Gradle Project,如下图中所示 - 点击下一步( ...
- Java第06次实验提纲(集合)
PTA与参考资料 重要参考-集合简述 题集:jmu-Java-06-集合 集合实验文件 第1次实验 1.1 ArrayListIntegerStack(课堂演示) 可演示:jdk中的javadoc文档 ...
- pytest.4.Fixture
From: http://www.testclass.net/pytest/fixture/ 我们可以简单的把Fixture理解为准备测试数据和初始化测试对象的阶段. 一般我们对测试数据和测试对象的管 ...
- solrCloud index search (图)
结合网上的资料,抄袭了几张图,记录下. 1.solrcloud-collection/shard/replica 1.Replica.Leader是core的角色,在index.search的过程中作 ...
- Flashbuilder的bug FlashBuilder 1119: 访问可能未定义的属性 on (通过 static 类型
FlashBuilder 1119: 访问可能未定义的属性 on (通过 static 类型 当此问题出现的时候 无论 刷新 清理 注释 删除 乃至重启电脑都无济于事. 解决方法:备份此类到另外一个地 ...
- 关于requests的session方法保持不了cookie的问题。(seesion的意思是保持一个会话,比如 登陆后继续操作(记录身份信息) 而requests是单次请求的请求,身份信息不会被记录)
最近在做爬虫的时候遇到了一个问题,在用requests的session方法保持cookie的时候发现requests不能保持手动构建的cookie.起初以为requests只能自动保持由服务器返回的s ...
- Scala函数式对象-有理数
有理数类的表示 实现规范:支持有理数的加减乘除,并支持有理数的规范表示 1.定义Rational 首先,考虑用户如何使用这个类,我们已经决定使用“Immutable”方式来使用Rational对象,我 ...
- 原型设计工具——axure认识与使用
原型设计工具——axure认识与使用 10款原型设计工具推荐 pasting
- git之win安装git和环境配置及常用命令总结
12.windowns安装git和环境变量配置 11.git之常见命令总结 ===== 12.windowns安装git和环境变量配置 ; 转自 https://wuzhuti.cn/2385.htm ...