就是这样

这是一段可选文字

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

代码如下

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. [DPI] Cisco Application Visibility and Control

    DPI,可分为三部分: https://blogs.cisco.com/enterprise/cisco-traffic-analysis-encrypted-threat-analytics 知名端 ...

  2. 将DOS格式的shell脚本转为UNIX格式

    shell脚本是UNIX格式,在修改其中内容时,务必保持UNIX格式.UE编辑器打开时,会询问是否转为DOS格式,请点否.如果修改完成后,不能确认是否为DOS格式,可以使用UE文件菜单下的Conver ...

  3. LeetCode 485 Max Consecutive Ones 解题报告

    题目要求 Given a binary array, find the maximum number of consecutive 1s in this array. 题目分析及思路 给定一个01数组 ...

  4. postgresSQL主从流复制安装

    命令行运维: https://blog.csdn.net/zhangzeyuaaa/article/details/77941039 安装流程: 先准备类库: yum -y install readl ...

  5. MySQL忘记root密码--不重启mysqd重置root密码

    先提个问题:如何不重启mysqld,且没有权限修改用户账号和权限的情况下,如何重新设置root密码?不知道没关系,在此之前我也是不知道如何操作的,先看看下面的几种重置root密码的方法. 1.skip ...

  6. Replication主要配置项

    八.Replication主要配置项(配置文件) 1.log_bin:指定binlog文件的名称,同时也表示开启binlog功能,在replication模式下,master上必须开启log_bin, ...

  7. 共分为六部完成根据模板导出excel操作

    第一步.设置excel模板路径(setSrcPath) 第二步.设置要生成excel文件路径(setDesPath) 第三步.设置模板中哪个Sheet列(setSheetName) 第四步.获取所读取 ...

  8. OpenCV矩形检测

    OpenCV矩形检测 需求:提取图像中的矩形,图像存在污染现象,即矩形区域不是完全规则的矩形. 思路一:轮廓法 OpenCV里提取目标轮廓的函数是findContours,它的输入图像是一幅二值图像, ...

  9. Django 模板中 变量 过滤器的使用方法

    一.变量       1.变量的形式是:{{variable}}, 当模板引擎碰到变量的时候,引擎使用变量的值代替变量.    2.使用dot(.)能够访问变量的属性    3.当模板引擎碰到dot的 ...

  10. haproxy json 自定义格式日志 并用rsyslog 收集

    haproxy的配置 日志投送: global log 127.0.0.1 local1 info 默认端口是udp514 默认日志: defaults log global log-format \ ...