android流光字体实现,CSS实现字体流光/高光滑动

这是个字体流光效果

.masked h4{

display: block;

width: 600px;

height: 100px;

/*渐变背景*/

background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,

#ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);

color: transparent; /*文字填充色为透明*/

-webkit-text-fill-color: transparent;

-webkit-background-clip: text; /*背景剪裁为文字，只将文字显示为背景*/

background-size: 200% 100%; /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/

/* 动画 */

animation: masked-animation 4s infinite linear;

}

@keyframes masked-animation {

0% {

background-position: 0 0; /*background-position 属性设置背景图像的起始位置。*/

}

100% {

background-position: -100% 0;

}

android流光字体实现,CSS实现字体流光/高光滑动相关推荐

HTML页面引入字体@font-face CSS指定字体从远程服务器下载
@font-face @font-face CSS at-rule 指定一个用于显示文本的自定义字体:字体能从远程服务器或者用户本地安装的字体加载. 如果提供了local()函数,从用户本地查找指定的 ...
页面可用性之浏览器默认字体与CSS中文字体
一.浏览器默认字体众所周知,浏览器字体默认的设置为"宋体/simsun字体 16像素",例如Chrome浏览器下: 二.CSS中设置的字体考虑到兼容性,我们总会在CSS中队字体 ...
css设置个性字体大小,css设置字体大小的属性名是什么
css设置字体大小的属性名是"font-size",该属性使用css中表示尺寸的单位(px.em.rem等)设置字体大小,也可以使用百分号等单位来设置.实际上font-size设置 ...
html字体修改微软字体大小,css设置字体(css怎么调整字体大小)
一般字体的设置包含:字体,字体大小,字体颜色 html设置字体的话有很多标签去设置1. h1,h2,h3,h4,h5,h6 标题其中定义最大的标题. 定义最小的标题.2. 采用. 用Css设置整个 ...
html 字体模糊,css – Chrome字体显示模糊
它在做我的眼睛! 在IE和Firefox看起来不错 Chrome(上图) 运行版本39的chrome, 只在模态框中显示模糊,如果我更改字体系列没有什么不同. 这是CSS(对于标签"开始&q ...
safari html 字体设置,css – Safari字体渲染问题
有一个CSS属性,文本渲染,在Safari中默认设置为optimizeSpeed.你想改变的是: text-rendering:optimizeLegibility; 有四个可能的值: •自动(默认) ...
css字压,CSS自定义字体的实现，前端实现字体压缩
CSS 自定义字体移动端如何兼容UI给的字体 [toc] 移动端的默认字体 IOS 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue And ...
css中字体下划线样式,css下划线浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
炫彩流光文字 html+css
效果: 实现: 1. 定义标签,各自作用看后面解析: <main><h1 class="txt">live on.</h1><h1 cla ...
css字体 text,css文本样式text、字体样式font
文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...

android流光字体实现,CSS实现字体流光/高光滑动

这是个字体流光效果

android流光字体实现,CSS实现字体流光/高光滑动相关推荐

最新文章

热门文章