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中发现输入命令查看字体列表是提示命令无效: 如上图可以看出,不仅没有中文字体,连字体 ...
随机推荐
- Matlab学习过程中的一些小问题
1.Overload your functions by having variable number of input and output argumernt.Not only can we ov ...
- 图解 kubernetes scheduler 架构设计系列-初步了解
资源调度基础 scheudler是kubernetes中的核心组件,负责为用户声明的pod资源选择合适的node,同时保证集群资源的最大化利用,这里先介绍下资源调度系统设计里面的一些基础概念 基础任务 ...
- DZNEmptyDataSet框架阅读
前段时间使用公司封装的空白页占位视图工具,工具是对DZNEmptyDataSet框架的封装.这个框架以前在许多项目也都用过,却没有认真阅读过源码,真的很遗憾.这两天趁五一放假有空,将DZNEmpt ...
- .NET Core学习笔记(3)——async/await中的Exception处理
在写了很多年.NET程序之后,年长的猿类在面对异步编程时,仍不时会犯下致命错误,乃至被拖出去杀了祭天.本篇就async/await中的Exception处理进行讨论,为种族的繁衍生息做出贡献……处理a ...
- Scala实践11
1.1泛型类 泛型类是将类型作为参数的类.它们对集合类特别有用. 定义泛类型:泛型类将类型作为方括号内的参数[].一种惯例是使用字母A作为类型参数标识符,但是可以使用任何参数名称. class Sta ...
- 6、使用基元类型而不要使用 FCL 类型
基元类型: int string object uint long ulong 等 ; FCL (Framework Class Library ) System.Int32 等. 一些定义在一些语言 ...
- Spring Boot2 系列教程 (十六) | 整合 WebSocket 实现广播
前言 如题,今天介绍的是 SpringBoot 整合 WebSocket 实现广播消息. 什么是 WebSocket ? WebSocket 为浏览器和服务器提供了双工异步通信的功能,即浏览器可以向服 ...
- STM32动态内存分配需要注意的地方
STM32进行动态内存分配是需要注意动态内存分配大小不要超过.S文件中设置Heap Size大小 如图所示: 0x4000 :可以分配得最大字节是16384bytes 这个地方malloc的大小超过了 ...
- Django admin的常用方法
一.HTTP 1.主页面 http://127.0.0.1:8000/admin/ 2.查询页面 http://127.0.0.1:8000/admin/app01/book/ 3.增加页面 http ...
- 前端之css的基本使用(一),行内、内部、外部样式,语法格式、注释、选择符、属性等
一.行内.内部.外部样式 1.行内样式 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...