css实现渐变字体和流光字体
这是段渐变文本
.text{
font-size: 30px;
font-weight: bold;
background-image: linear-gradient(#ed3f27, #9b0999);
-webkit-background-clip: text;
color: transparent ;
}
这是段流光文本
.text2{
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));
background-size: 200%,100%;
-webkit-background-clip: text;
-webkit-animation: word 5s linear infinite ;
}
@keyframes word {
0%{background-position: 0 0}
100%{background-position: -100% 0}
}
参考:CSS3 text-fill-color简介及应用展示
css实现渐变字体和流光字体的更多相关文章
- css 文本外观属性(text) 和 字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
- css语法规范、选择器、字体、文本
css语法规范 使用 HTML 时需要遵从一定的规范,CSS 也是如此.要想熟练地使用 CSS 对网页进行修饰,首先需要了解CSS 样式规则. CSS 规则由两个主要的部分构成:选择器以及一条或多条声 ...
- CSS简介,基础选择器,字体属性,文本属性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- css整理-02 颜色和字体
颜色 命名颜色 RGB指定颜色 数值: 0-255 百分比 三元组:红绿蓝 16进制RGB web安全颜色 在256色计算机系统上总能避免抖动的颜色 表示为rgb值20%和51的倍数 web安全色的简 ...
- HTML与CSS入门——第六章 使用字体
知识点: 1.粗体.斜体和特殊文本格式的使用 2.字体的调整方法 3.特殊字符的使用方法 6.1 粗体.斜体和特殊文本格式: font-weight控制粗细 加粗<strong> font ...
- 如何制作prezi swf格式字体(prezi 中文字体)
如何制作prezi swf格式字体(prezi 中文字体) 文/玄魂 前言 Prezi软件虽然没有正式进入中国,但是中国的Prezi爱好者却在不遗余力的推广着Prezi.我接触这款软件比较晚,但是从接 ...
- 修改字体篇:css3@font-face@字体转换@浏览器字体支持
@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('web ...
- CentOS 7 安装字体库 & 中文字体
前言 报表中发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作系统是否有中文字体,在CentOS 7中发现输入命令查看字体列表是提示命令无效: 如上图可以看出,不仅没有中文字体,连字体 ...
随机推荐
- Okhttp解析—Okhttp概览
Okhttp解析-Okhttp概览 Okhttp作为目前Android使用最为广泛的网络框架之一,我们有必要去深入了解一下,本文是Okhttp解析的第一篇,主要是从宏观上认识Okhttp整个架构是如何 ...
- 小小知识点(二十二)显示屏与主机之间连接,出现无信号字样时,应检查是否正确选择集显和独显VGA接口
显示屏与主机之间连接,出现无信号字样时,应检查是否正确选择集显和独显VGA接口 通过VGA接口判断集成显卡和独立显卡.在台式机主机上,VGA接口竖着放置的说明是集成显卡,VGA接口横着放置的说明是独立 ...
- 移动web 1像素边框
实现方法 border-image 图片 实现 这篇文章是腾讯github上的解决方案border-image来实现的 链接走起 <使用border-image实现类似iOS7的1px底边> ...
- 51nod 1086背包问题V2 (完全背包模板题)
1086 背包问题 V2 1 秒 131,072 KB 20 分 3 级题 题目描述 有N种物品,每种物品的数量为C1,C2......Cn.从中任选若干件放在容量为W的背包里,每种物品的体积为W1, ...
- 除了闹过腥风血雨的fastjson,你还知道哪些Java解析JSON的利器?
昨天下午 5 点 10 分左右,我解决掉了最后一个 bug,轻舒一口气,准备关机下班.可这个时候,老板朝我走来,脸上挂着神秘的微笑,我就知道他不怀好意.果不其然,他扔给了我一个新的需求,要我在 Jav ...
- 【python系统学习05】input函数——实现人机交互
input函数 目录 input用途 语法 示例 参数 返回值 返回值数据类型转换 容错处理 动手吧 input用途 实现人机交互: 1.你提出问题打印在屏幕上, 2.运行程序的人再输入回答. 3.按 ...
- Activiti 手工任务(manualTask)
Activiti 手工任务(manualTask) 作者:Jesai 前言: 手工任务就是一个自动执行的过程.手动任务几乎不在程序中做什么事情,只是在流程的历史中留下一点痕迹,表明流程是走过某些节点的 ...
- java常量 数据类型
一.常量 概念:程序运行期间,内容不发生改变的量 1.字符串常量 双引号 2.整数常量 3.浮点数常量 4.字符常量 单引号 一个字符 必须要有一个字符 不能为空 5.布尔常量 true false ...
- MySql 常用时间函数
1.date() 提取日期或日期时间表达式的日期部分 select date(create_time) from blog_article; 2.date_format() select date_f ...
- 8.JavaSE之变量、常量、作用域
变量variable: 变量是什么:就是内存中开辟的可以变化的量! Java是一种强类型语言,每个变量都必须声明其类型. Java变量是程序中最基本的存储单元,其要素包括变量名,变量类型,作用域 ...