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中发现输入命令查看字体列表是提示命令无效: 如上图可以看出,不仅没有中文字体,连字体 ...
随机推荐
- Arrays.asList() 导致的java.lang.UnsupportedOperationException异常
Arrays.asList() 只支持遍历和取值 不支持增删改 继承至AbstractList内部类
- Ceph 文件系统-全网最炫酷的Ceph Dashboard页面和Ceph监控 -- <5>
Ceph Dashboard实现 Ceph Dashboard介绍 Ceph 的监控可视化界面方案很多----grafana.Kraken.但是从Luminous开始,Ceph 提供了原生的Dashb ...
- vue超简单加载字体方法,解决scss难加载字体的问题
vue超简单加载字体方法,解决scss难加载字体的问题 scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法 在App.vue的style标签下引入字体文件后 ...
- Django2.0 配置 media
1.setting.py文件 MEDIA_URL='/media/' MEDIA_ROOT=os.path.join(BASE_DIR,"media") 注意:MEDIA_ROOT ...
- 异数OS-织梦师-PBFT(六) 走出区块链,加速破解PBFT
. 异数OS-织梦师-PBFT(六) 走出区块链,加速破解PBFT 拜占庭 本文来自异数OS社区 github: https://github.com/yds086/HereticOS 异数OS社区Q ...
- 异数OS-星星之火(二)--远程实验室注册开放
异数OS-星星之火(二) 远程实验室注册开放 异数os-织梦师云 未来操作系统技术远程实验室预计9月中旬开放,提供异数os用户学习研究测试服务,目前在做容器化多租户环境改造,先开放会员预注册通道,有需 ...
- [bzoj2152] [洛谷P2634] 聪聪可可
Description 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电脑)--遇到这种问题,一般情况下石头剪刀布就好 ...
- NIO&AIO编程模型
NIO线程模型 什么是NIO线程模型? 上图是NIO的线程模型, 基于select实现, 这种线程模型的特点: 多条channel通过一个选择器和单挑线程绑定, 并且在这种编程模型中, Cha ...
- ContractPattern 面向面向契约模式
- Rainbow Plan团队项目第一次作业——项目计划
团队项目--Rainbow Plan英语学习App 1.团队简介 1.1团队名称:Rainbow Plan (彩虹计划) 1.2团队成员: 队员学号 队员姓名 201731024235 何继武(组长) ...