就是这样

这是一段可选文字

--------------------------------------

代码如下

CSS代码:
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.masked{
background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: masked-animation 4s infinite linear;
}
}
@-webkit-keyframes masked-animation {
0% { background-position: 0 0;}
100% { background-position: -100% 0;}
}
HTML代码:
<div class="masked">
<h4>这是一段可选文字</h4>
</div>

  

css 渐变动画的更多相关文章

  1. 谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. Gradify - 提取图片颜色,创建响应式的 CSS渐变

    被请求的HTTP对象之间的延迟会有一个时间段,这个期间网页看起来不完整.Gradify 可以分析出图像中4个最常见的颜色,创建一个梯度(或纯色)作为图片占位符.Gradify 可以在在任何图像发现最突 ...

  3. css过渡动画

    具体代码:1.水平翻转-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);-o-transform:scale(-1,1);transfo ...

  4. 创建CSS3警示框渐变动画

    来源:GBin1.com 在线演示   在线下载 现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的.由于默认的JavaScript警示框往往设计不佳和过 ...

  5. CSS变形动画

    CSS变形动画 前言 在开始介绍CSS变形动画之前,可以先了解一下学习了它之后能做什么,有什么用,这样你看这篇文章可能会有一些动力. 学习了CSS变形动画后,你可以为你的页面做出很多炫酷的效果,如一个 ...

  6. CSS帧动画

    CSS帧动画 基础知识 通过定义一段动画中的关键点.关键状态来创建动画.@Keyframes相比transition对动画过程和细节有更强的控制. 过渡动画是两个状态间的变化,帧动画可以处理动画过程中 ...

  7. 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画?

    本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画 ...

  8. 第四十二课:基于CSS的动画引擎

    由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...

  9. Effeckt.css项目:CSS交互动画应用集锦

    目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...

随机推荐

  1. 树和二叉树->线索二叉树

    文字描述 从二叉树的遍历可知,遍历二叉树的输出结果可看成一个线性队列,使得每个结点(除第一个和最后一个外)在这个线形队列中有且仅有一个前驱和一个后继.但是当采用二叉链表作为二叉树的存储结构时,只能得到 ...

  2. 新建oracle用户

    1.oracle 账户登录linux:2.如果存在多个切换实例:命令:export ORACLE_SID=实例名:如:export ORACLE_SID=utf81863.切换至管理员账户:sqlpl ...

  3. go get 的使用

    1.设置环境变量export GOPATH=/f/go_work2 2.go get github.com/xx

  4. 【PyQt5-Qt Designer】鼠标+键盘事件

    重定义鼠标响应+键盘响应事件 一,每个事件都被封装成相应的类: pyqt中,每个事件类型都被封装成相应的事件类,如鼠标事件为QMouseEvent,键盘事件为QKeyEvent等.而它们的基类是QEv ...

  5. mysql 设置 innodb_print_all_deadlocks=ON, 保存死锁日志

    Introduced 5.6.2 Command-Line Format --innodb-print-all-deadlocks=# System Variable Name innodb_prin ...

  6. 【托业】【新托业TOEIC新题型真题】学习笔记12-题库八-P7

    155.political figure 政治人物 prominent 160.association n.协会,社团; 联合,联系; 联想; rarely adv.很少地; 罕有地; 极精彩地; 珍 ...

  7. MySQL 5.5 服务器变量详解(一)

    autocommit={0|1} 设定MySQL事务是否自动提交,1表示立即提交,0表示需要显式提交.作用范围为全局或会话,可用于配置文件中(但在5.5.8之前的版本中不可用于配置文件),属于动态变量 ...

  8. finecms如何调用自定义内容

    我们建站的时间经常会有一些固定的元素,比如电话.地址等,这种相对比较简单的东西可以让编辑人员直接在后台就可以定义,那么finecms有没有这个功能呢?怎么定义?如何调用? finecms后台有一个自定 ...

  9. 指向list的指针

    #include<list> #include<string> #include<iostream> using namespace std; int main() ...

  10. HTTP请求响应报文 - 相关状态码 - GET_POST请求方法

    HTTP请求报文: 一个HTTP请求报文由四个部分组成:请求行.请求头部.空行.请求数据 1.请求行 请求行由请求方法字段.URL字段和HTTP协议版本字段3个字段组成,它们用空格分隔.比如 GET ...