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 ...
随机推荐
- [administrative][CentOS][NetworkManager] 万恶的NetworkManager到底怎么用
这好像是第三次不得不去学会NetworkManager的用法,可是它真的很难用.社区里无人不吐槽. 然而,还是要用! 这次从redhat的文档入手,也许可以成功 --! https://access. ...
- 浅谈Trie树
Trie树,也叫字典树.顾名思义,它就是一个字典 字典是干什么的?查找单词!(英文字典哦) 个人认为字典树这个名字起得特别好,因为它真的跟字典特别像,一会r你就知道了. 注:trie的中文翻译就是单词 ...
- Docker For Mac没有docker0网桥
在使用Docker时,要注意平台之间实现的差异性,如Docker For Mac的实现和标准Docker规范有区别,Docker For Mac的Docker Daemon是运行于虚拟机(xhyve) ...
- centos安装Django之三:安装python
这是centos安装Django系列第三篇,安装python.centos系统已经自带了python2.6,但是它被系统很多程序所依赖,不建议删除.我们可以使用以下命令来查看我们使用的Python版本 ...
- 使用python以及工具包进行简单的验证码识别
识别数字验证码 首先我们准备素材,4张验证码图片如下: 第一步: 打开图像. im = Image.open('temp1.jpg') 第二步: 把彩色图像转化为灰度图像.彩色图像转化为灰 ...
- Redis入门到高可用(十二)—— pipeline
一.回忆通信模型 二.流水线 1.什么是流水线 2.pipeline-Jedis实现 3.与原生M(mget,mset等)操作对比 M操作是原子操作 pipeline命令是非原子的,Redis服务器会 ...
- CentOS7下Docker的安装与使用
前言 简介 Docker 是一个开源的应用容器引擎,基于 Go 语言,并遵从 Apache2.0 协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到 ...
- sap 调试工具,修改变量值
1: 点击修改,输入变量值,按enter键.
- [py]__name__ 属于哪个文件
name: 属于哪个文件 文件的 main 类的 class Person(object): """ 定义一个类 """ count = 1 ...
- 项目发布脚本-nodejs
#!/bin/bash export PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin clear printf &q ...