css 渐变动画
就是这样
这是一段可选文字
--------------------------------------
代码如下
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 渐变动画的更多相关文章
- 谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- Gradify - 提取图片颜色,创建响应式的 CSS渐变
被请求的HTTP对象之间的延迟会有一个时间段,这个期间网页看起来不完整.Gradify 可以分析出图像中4个最常见的颜色,创建一个梯度(或纯色)作为图片占位符.Gradify 可以在在任何图像发现最突 ...
- css过渡动画
具体代码:1.水平翻转-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);-o-transform:scale(-1,1);transfo ...
- 创建CSS3警示框渐变动画
来源:GBin1.com 在线演示 在线下载 现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的.由于默认的JavaScript警示框往往设计不佳和过 ...
- CSS变形动画
CSS变形动画 前言 在开始介绍CSS变形动画之前,可以先了解一下学习了它之后能做什么,有什么用,这样你看这篇文章可能会有一些动力. 学习了CSS变形动画后,你可以为你的页面做出很多炫酷的效果,如一个 ...
- CSS帧动画
CSS帧动画 基础知识 通过定义一段动画中的关键点.关键状态来创建动画.@Keyframes相比transition对动画过程和细节有更强的控制. 过渡动画是两个状态间的变化,帧动画可以处理动画过程中 ...
- 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画?
本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画 ...
- 第四十二课:基于CSS的动画引擎
由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...
- Effeckt.css项目:CSS交互动画应用集锦
目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...
随机推荐
- LeetCode 709 To Lower Case 解题报告
题目要求 Implement function ToLowerCase() that has a string parameter str, and returns the same string i ...
- WIN10登录时找不到Administrator用户
前提:WIN才安装的系统登录时只看到admin用户看不到administrator用户 1. 按网上方法,进入[此电脑]--[管理]--[系统工具]--[本地用户和组]--[用户] 2. 双击打开Ad ...
- python摸爬滚打之day05----字典
1.字典介绍 1.1 结构: {key1: value1, key2: value2, ....} ,由很多键值对构成. 在字典的key-value(键值对)中, key(键)必须是可哈希(不可变 ...
- 【python基础】迭代器和生成器函数
1.迭代器协议: 1.迭代器协议是指:对象必须提供一个 __next__() 方法,执行该方法要么返回迭代中的下一项,要么就引起一个StopIteration异常,以终止迭代(只能往后走不能往前退) ...
- swift一些常用系统方法的简化使用
//获取Image func FImage(_ imageName:String) -> UIImage { return UIImage(named:imageName)! } //获取Url ...
- C++ 方阵原地旋转90度
不额外申请内存(另外的一个二维数组空间),将一个方阵(二维数组)原地旋转90度,主要的思路是,由外向内,一圈圈的进行旋转(就是依次进行交换),如下图所示,当这些圈圈都交换完了之后,就完成了原地旋转了. ...
- replace函数的使用(替换单个和全局)
//单个 var aa="1-2-3"; aa=aa.replace(',',"."); console.log(aa); //全局替换 var aa=&quo ...
- 20180925 SQL Server游标使用
之前写了一个存储过程 目标: 根据时间,获取指定范围的数据集A, 再从数据集A 中,取出每行数据中的两个时间,卡另外一个B表里面的某列时间范围的值集.得到均值进行配置值比对. 这里有个问题,就是取得B ...
- NYOJ 61 传纸条(一)
双线DP #include<iostream> #include<algorithm> #include<ctype.h> #include<string&g ...
- 导出mysql数据库数据
1.phpmyadmin导出 ) AS `a` LEFT JOIN ( SELECT * FROM `newerp_jifen_order_log` WHERE `content` = '客户确认收货 ...