就是这样

这是一段可选文字

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

代码如下

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. EF-CodeFirst-基础

    什么是Code-First Code-First主要用于领域驱动设计.在Code-First方法中,专注于应用程序的域,先开始为域实体创建类,而不是先设计数据库,然后创建与数据库设计相匹配的类.下图说 ...

  2. pymysql 模块 使用目录

    mysql python pymysql模块 基本使用 mysql python pymysql模块 增删改查 插入数据 介绍 commit() execute() executemany() 函数 ...

  3. AsyncStorage和Promise配合使用

    代码: AsyncStorage封装 import {AsyncStorage} from "react-native"; class DeviceStorage { //保存数据 ...

  4. 【BFS宽度优先搜索】

    一.求所有顶点到s顶点的最小步数   //BFS宽度优先搜索 #include<iostream> using namespace std; #include<queue> # ...

  5. 从Trie树(字典树)谈到后缀树

    转:http://blog.csdn.net/v_july_v/article/details/6897097 引言 常关注本blog的读者朋友想必看过此篇文章:从B树.B+树.B*树谈到R 树,这次 ...

  6. golang 与 c语言 之间传递指针的规则提案

    https://go.googlesource.com/proposal/+/master/design/12416-cgo-pointers.md https://github.com/golang ...

  7. centos6和7关闭防火墙

    centos6 service iptables stop       临时 chkconfig iptables off 永久 service iptables status centos7 sys ...

  8. 【UML】-NO.40.UML.1.UML.1.001-【UML】- uml

    1.0.0 Summary Tittle:[UML]-NO.40.UML.1.UML.1.001-[UML]- uml Style:DesignPattern Series:DesignPattern ...

  9. 【Tools】-NO.10.Tools.2.IDEA.1.001-【IDEA Configuration】-

    1.0.0 Summary Tittle:[Tools]-NO.10.Tools.2.IDEA.1.001-[IDEA Configuration]- Style:Tools Series:IDEA ...

  10. k8s pv 的三种挂载模式

    ReadWriteOnce:可读可写,只能被一个Node节点挂载 ReadWriteMany:可读可写,可以被多个Node节点挂载 ReadOnlyMany:只读,能被多个Node节点挂载