实现此效果

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.colorful {
/*-webkit-mask-image: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple); */
background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-background-size: 200% 100%;
animation: bgp 5s infinite linear;
}

.colorful span {
color: #E16132;
margin-right: 5px;
text-decoration: none;
padding: 3px 0;
}

@-webkit-keyframes bgp {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
</style>
</head>

<body>
<p class="colorful ovh">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
<span>18</span>
<span>19</span>
<span>20</span>
</p>
</body>

</html>

纯css实现的更多相关文章

  1. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

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

  2. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  3. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  4. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  5. 用纯css改变下拉列表select框的默认样式（不兼容IE10以下）

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  6. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  7. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  8. 纯CSS完成tab实现5种不同切换对应内容效果

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  9. 简单而兼容性好的Web自适应高度布局，纯CSS

    纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...

  10. 纯CSS tooltip 提示

    一般的tooltip,使用超链接的title,或者是css+javascript生成. 如果页面布局合理,样式结构清晰,可以使用纯CSS的提示. demo如下: a.tooltip { positio ...

随机推荐

  1. Orcal数据库12c安装完成后注意事项

    1.按照12c的安装使用装完数据库后,使用navicat链接orcal数据库时无法使用. 点击此处查看安装方案 2. 2048错误,ORA-28040: No matching authenticat ...

  2. SSH升级到7.7

    #!/bin/bash#删除旧版ssh包 危险操作,不删除也可以安装,建议跳过此操作.#rpm -e `rpm -qa | grep openssh` #安装zlib依赖包wget -c http:/ ...

  3. AE旋转

    精准对位: 好几个图层上的旋转点在一个位置上: 方法1:勾选网格,定点. 方法2:按住ctrl+r  调出尺寸.拖参考线,焦点自动吸附功能. 选中四张或者选中第一张,按shift键,选中最后一张(即可 ...

  4. iostat iotop 查看硬盘的读写、 free 查看内存的命令 、netstat 命令查看网络、tcpdump 命令

    iostat 命令 查看硬盘的使用情况: iostat iostat -x iotop 命令: 若没安装先安装: yum install iotop -y free 命令,用于查看内存的使用量: fr ...

  5. canvas的认识，时钟的设置

    canvas的三要素:ID标识,width宽度,height高度,他是行元素 IE9才支持canvas,canvas是一个透明的画板,要用js去画 绘制一个圆 线性渐变颜色 径向渐变 图片的绘制: 视 ...

  6. 简单了解version control

    1.什么是版本控制: 版本控制是指对软件开发过程中各种程序代码.配置文件及说明文档等文件变更的管理,是软件管理的核心思想之一 2.版本控制简述 版本控制最主要的功能就是追踪文件的变更.它将什么时候.什 ...

  7. JAVA 实用插件

    一.alibaba开发规约插件 https://p3c.alibaba.com/plugin/eclipse/update 下载地址 alibaba是个优秀的公司,这个插件能很好的规范代码,推荐给大家 ...

  8. vue 2.0 vue.set的使用方法

    这里我定义了一个列表数据,我将通过三个不同的按钮来控制列表数据. 首先在列表中动态新增一条数据: <!DOCTYPE html><html><head lang=&quo ...

  9. Windows 2008 R2环境下DHCP服务的安装部署使用

    (第一版本) 这个实验好像需要在部署了activity directory服务的基础上的,给个直达链接 http://blog.csdn.net/qq_34829953/article/details ...

  10. leetcode第一刷_Insert Interval

    这道题的难度跟微软的那道面试题相当. 要在集合中插入一段新的集合,相当于求两个集合的并了.对于新增加一段集合的情况,分为以下几种: 1. 增加段跟原来的全然相交,也即他的起点和终点都在被包括在原来的段 ...