文档章节

CSS3 文字渐变动画

o
 osc_g8254g7s
发布于 2019/08/19 21:55
字数 308
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

背景剪裁

语法:background-clip: border-box || padding-box || context-box || no-clip || text

本次用到的就是: -webkit-background-clip:text;(谷歌浏览器)

 

 示例:从局部到全局渐变

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>文字渐变动画</title>
 6   <style>
 7 .slideShine{
 8 
 9      background:#871317 -webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0;
10 
11      background-size:20% 100%; 
12 
13      -webkit-background-clip: text;
14 
15      -webkit-text-fill-color: transparent;
16 
17      font-size: 36px;
18 
19      text-align: center;
20 
21      font-weight: bold;
22 
23      text-decoration: underline;
24 
25 }
26 
27 .slideShine {-webkit-animation: slideShine 4s linear infinite;animation: slideShine 4s linear infinite;}
28 
29 @-webkit-keyframes slideShine {
30 
31      0% {
32 
33           background-position: 0 0;
34 
35         }
36 
37      100% {
38 
39           background-position: 100% 100%;
40 
41       }
42 
43  }
44 
45  @keyframes slideShine {
46 
47       0% {background-position: 0 0; }
48 
49      100% {background-position: 100% 100%; }
50 
51  }
52 </style>
53 
54 </head>
55 <body>
56 
57 <p class="slideShine" >→css3文字渐变动画效果 >></p>
58 
59 
60 </body>
61 </html>

 

效果图:

 

这是一个动态的图片,截屏如上图所示。

 

说明:

-webkit-text-fill-color: transparent;(这里必须填充透明颜色,这样渐变的颜色才会填充到文字上面,去掉这个或者填充别的颜色,效果不明显)

检索或设置对象中的文字填充颜色,若同时设置 <' text-fill-color '> 和 <' color '>,<' text-fill-color '> 定义的颜色将覆盖 <' color '> 属性;

 

     希望有所帮助!!!

上一篇: 浏览器兼容问题
下一篇: 微生物来源分析
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
9款超绚丽的HTML5/CSS3应用和动画特效

HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验。今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单、按钮、图片...

切切歆语
2017/10/23
815
0
【笔记】玩转CSS3新特性_from_JSPang

文章目录 }xxx{ }xxx:hover{ / link选择器是用来选中标签当中的未访问的连接 // 它将选中那些尚未访问的链接,包括那些给定了其他伪类元素的选择器连接 // 例如::hover :active :visited /...

osc_u20gxst6
04/15
35
0
【笔记】玩转CSS3新特性_from_JSPang

文章目录 }xxx{ }xxx:hover{ / link选择器是用来选中标签当中的未访问的连接 // 它将选中那些尚未访问的链接,包括那些给定了其他伪类元素的选择器连接 // 例如::hover :active :visited /...

onc-virn
04/14
0
0
14款震撼人心的HTML5文字特效

1、CSS3五彩文字特效 文字带阴影效果 这是一款非常具有卡通形象的CSS3五彩文字特效,虽然没有迷人的动画效果,但是五彩缤纷的文字展现在屏幕上也是非常酷的,再加上每一个文字都有不同角度的...

analyzer
2014/05/26
0
0
7款震撼人心的HTML5CSS3文字特效

1、HTML5像素文字爆炸重组动画特效 今天我们要分享一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像...

osc_wz0c6jgl
05/16
4
0

没有更多内容

加载失败,请刷新页面

加载更多

WCF设计服务协议(一)

实现WCF的步骤如下: 设计服务协议 实现服务协议 配置服务 托管服务 生成客户端(这步可有可无) 设计或定义服务协议要么使用接口,要么使用类。建议接口,使用接口好处一堆例如修改接口的实...

osc_34b9n45c
21分钟前
7
0
【融职培训】Web前端学习 第10章 小程序开发3 目录结构介绍

一、项目目录 当我们创建好一个项目时,项目的目录如下所示: 可以看出小程序根目录下,有三个app开头的文件(app.js/app.json/app.wxss),和两个文件目录pages、utils. 其中,utils文件下存放...

学习猿地
21分钟前
4
0
Vscode html代码快速填写

前言 博主目前在用django进行web服务的部署,过程中遇到了许多问题,特此记录。 目录 文章目录 前言 目录 描述 描述 在网上搜索时发现,VScode可以自动补全html的代码,但自己的VScode却不具...

osc_j9qcf98f
23分钟前
12
0
LINQ聚合算法解释 - LINQ Aggregate algorithm explained

问题: This might sound lame, but I have not been able to find a really good explanation of Aggregate . 这可能听起来很蹩脚,但我还没有找到一个关于Aggregate的非常好的解释。 Good...

javail
24分钟前
13
0
django 创建超级用户时报错 1146

前言 博主目前在使用django部署web服务,遇到了一些列问题,特此记录,方便自己和别人 目录 文章目录 前言 目录 描述 解决方法 描述 操作(创建超级用户): python manage.py createsuperus...

osc_wyap8yov
25分钟前
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部