html怎么做模糊条纹,如何使用纯CSS实现彩虹条纹文字的效果
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom,容器中包含文本,并且包含4个用于特效,的data-text属性值为与文本相同:
web
居中显示:
html,body{
height:100%;
display:flex;
align-items:center;
justify-content:center;
background:black;
}
定义文本样式:
.rainbow{
color:white;
font-size:300px;
text-transform:uppercase;
font-family:sans-serif;
font-weight:bold;
line-height:1em;
position:relative;
}
用伪元素增加图层,形成彩虹效果:
.rainbowspan::before,
.rainbowspan::after{
content:attr(data-text);
position:absolute;
top:0;
left:0;
overflow:hidden;
}
.rainbowspan:nth-child(1)::before{
color:orchid;
z-index:1;
height:calc(100%-10%*1);
}
.rainbowspan:nth-child(1)::after{
color:mediumpurple;
z-index:2;
height:calc(100%-10%*2);
}
.rainbowspan:nth-child(2)::before{
color:deepskyblue;
z-index:3;
height:calc(100%-10%*3);
}
.rainbowspan:nth-child(2)::after{
color:cyan;
z-index:4;
height:calc(100%-10%*4);
}
.rainbowspan:nth-child(3)::before{
color:mediumspringgreen;
z-index:5;
height:calc(100%-10%*5);
}
.rainbowspan:nth-child(3)::after{
color:yellow;
z-index:6;
height:calc(100%-10%*6);
}
.rainbowspan:nth-child(4)::before{
color:gold;
z-index:7;
height:calc(100%-10%*7);
}
.rainbowspan:nth-child(4)::after{
color:tomato;
z-index:8;
height:calc(100%-10%*8);
}
增加动画效果:
.rainbowspan::before,
.rainbowspan::after{
animation:animate0.8sinfinitealternate;
filter:opacity(0);
}
@keyframesanimate{
from{
filter:opacity(0);
}
to{
filter:opacity(1);
}
}
为图层设置延时,增强动感:
.rainbowspan:nth-child(1)::before{
animation-delay:calc(0.8s-0.1s*1);
}
.rainbowspan:nth-child(1)::after{
animation-delay:calc(0.8s-0.1s*2);
}
.rainbowspan:nth-child(2)::before{
animation-delay:calc(0.8s-0.1s*3);
}
.rainbowspan:nth-child(2)::after{
animation-delay:calc(0.8s-0.1s*4);
}
.rainbowspan:nth-child(3)::before{
animation-delay:calc(0.8s-0.1s*5);
}
.rainbowspan:nth-child(3)::after{
animation-delay:calc(0.8s-0.1s*6);
}
.rainbowspan:nth-child(4)::before{
animation-delay:calc(0.8s-0.1s*7);
}
.rainbowspan:nth-child(4)::after{
animation-delay:calc(0.8s-0.1s*8);
}
最后,把原始文本设置为透明色:
.rainbow{
color:transparent;
}
大功告成!
本文转载自中文网
html怎么做模糊条纹,如何使用纯CSS实现彩虹条纹文字的效果相关推荐
- html用css写彩虹,如何使用纯CSS实现彩虹条纹文字的效果(附代码)
本篇文章给大家带来的内容是关于如何使用纯CSS实现彩虹条纹文字的效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.co ...
- css动态彩虹背景,59.纯 CSS 创作彩虹背景文字
感想: 又一次见识到CSS的强大之处,当然MDN文档也是666: HTML code: thanks CSS code: html, body { margin:; padding:; } /* 设置 ...
- css动态彩虹背景,如何用纯 CSS 创作彩虹背景文字
CSS3 渐变(Gradients) https://www.runoob.com/css3/css3-gradients.html 效果预览 按下右侧的"点击预览"按钮可以在当前 ...
- css玻璃雨滴效果,纯css实现窗户玻璃雨滴逼真效果_javascript技巧
写样式,毕竟每个雨滴都长得不一致嘛.使用预处理器除了可以帮助我们减少工作量之外,还可以使用预处理器中的循环.变量等.最主要的是可以使用随机函数产生的随机值,让我们不需要单独处理上百个雨滴. 有关于HA ...
- html5霓虹效果代码,纯CSS实现酷炫的霓虹灯效果(附demo)
最近关注了油管上的 CSS Animation Effects Tutorial 系列,里面介绍了非常多有意思的 CSS 动效.其中第一个就是很酷炫的霓虹灯效果,这里就实现思路做一个简单的记录和分享. ...
- 纯CSS的方法解决文字溢出与截断的问题
纯CSS的方法解决文字溢出与截断的问题 参考文章: (1)纯CSS的方法解决文字溢出与截断的问题 (2)https://www.cnblogs.com/ilian/archive/2012/06/07 ...
- OneNav一为主题魔改教程(二):使用纯css增加网站Logo扫光效果--洞五洞洞幺
今日主题: 使用纯css增加网站Logo扫光效果 声明:本篇有违"魔改"这个标题:本篇只为增加收录.并且复习使用纯css给logo加上扫光效果. 效果: 可以目测 洞五洞洞幺 导航 ...
- html怎么实现蓝色垂直的直线,css实例教程 一款纯css实现的垂直时间线效果
今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: 复制代码代码如下 ...
- html怎么把字做成动画效果,利用纯CSS实现动态的文字效果实例
大家可能经常会看到类似酷炫的网站: 在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. 接下来,我以我目前的工程项目为例, ...
最新文章
- Coolite Toolkit学习笔记五:常用控件Menu和MenuPanel
- 使用jQuery更改下拉列表的选定值
- ​​​​​​​2016最新CocoaPods安装与使用
- Linux下的XAMPP基本配置技巧(设置虚拟主机、添加FTP账户等)
- 网络安全泡沫是否即将破灭?
- 电气与计算机学院院长论坛报告,我校电子系举办2019年电子信息学科院长论坛暨工程教育新进展研讨会...
- 手把手教你dns服务器未响应导致无法上网怎么办
- solution: stuch on 'setting up your MAC'
- DockOne微信分享(七十七):用Harbor实现容器镜像仓库的管理和运维
- easyui下拉选项多怎么解决_作物根部病害多原因在哪?解决病害生根措施怎么做?...
- Android项目开发填坑记-so文件引发的攻坚战
- 大厂面试必考的假设检验
- 四旋翼无人机飞行原理
- R语言--异常值检测
- 科来数据包生成器使用方法
- 傻事大征集:进来晾晾你小时候干过的傻事!www.11xp.com
- 用github创建php网站,github可以用来做什么
- 地域微信平台自媒体,原创视频如何插入腾讯地图
- web仿微信发朋友圈选择位置
- 关于真空荧光显示屏的·学习记录
热门文章
- U-boot给kernel传参数和kernel读取参数—struct tag
- HALCON示例程序measure_circuit_width_lines_gauss.hdev电路板线宽检测
- 二级Python 第三方库
- [转]Java反射机制详解
- Tomcat 配置文件
- 【NOIP2012】旅行计划
- Akka(9): 分布式运算:Remoting-远程构建式
- 从零开始攻略PHP(8)——面向对象(下)
- 短信通信的几种情况和CMS错误
- 【原创-长文】openstack 版本D安装配置及本次安装中遇到的问题