用CSS3实现彩虹文字的效果,只在Webkit内核的浏览器(谷歌浏览器或移动端)上有效果。

background-image:
-webkit-gradient(linear, left top, right top, color-stop(0, #f22),
color-stop(0.15, #f2f),
color-stop(0.3, #22f),
color-stop(0.45, #2ff),
color-stop(0.6, #2f2),
color-stop(0.75, #2f2),
color-stop(0.9, #ff2),
color-stop(1, #f22));
color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
-ms-background-clip: text;

来看看具体的效果:

 在夜深人静的时候,想起她。

原理是将文字设置为透明,然后通过背景图片中的渐变给透明的文字上色。

"有时候,虽然能想明白,但心里就是接受不了。"

css彩虹文字的更多相关文章

  1. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

  2. css控制文字长度,超出长度显示...

    css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...

  3. (转载)最实用的清除浮动代码 css的文字过长裁剪后面跟着省略号

    css: .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;} .clearfloat ...

  4. 用CSS让文字居于div的底部

    css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部 ...

  5. --css 控制文字多使用省略号

    --css 控制文字多使用省略号.overflowPoint{ text-overflow:ellipsis;width: 200px;overflow: hidden;}<div class= ...

  6. div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出

    今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...

  7. CSS控制文字显示一行,超出显示省略号

    这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...

  8. CSS实现文字竖排排版

    CSS实现文字竖排 注意: writing-mode: vertical-rl;存在兼容性问题,在IE上正常,在谷歌的低版本上可能识别不了. 如果文字少的话考虑直接在每一个文字中间加一个<br& ...

  9. CSS实现文字半透明显示在图片上方法

    CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...

随机推荐

  1. 【LOJ#573】【LNR#2】单枪匹马(线段树)

    [LOJ#573][LNR#2]单枪匹马(线段树) 题面 LOJ 题解 考虑拿线段树维护这个值,现在的问题就是左右怎么合并,那么就假设最右侧进来的那个分数是\(\frac{x}{y}\)的形式,那么就 ...

  2. ES6语法:let和const

    ES6新增加了两个重要的JavaScript关键字:let和const 一.let关键字 let声明的变量只在let命令所在的代码块内有效. 1.基本语法 let a='123' 2.let和var的 ...

  3. 帝国CMS QQ登陆接口插件 适用于所有帝国7.2版本

    插件名称:帝国CMS-QQ登录插件 插件作者:帝国CMS官方 插件介绍:帝国CMS系统的QQ登录插件. 官方网站:http://www.phome.net ---------------------- ...

  4. Python 爬取猫眼电影《无名之辈》并对其进行数据分析

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 罗昭成 PS:如有需要Python学习资料的小伙伴可以加点击下方链接 ...

  5. indexOf()字符位置

    package seday01; /** * int indexOf(String str) * 查找给定字符串在当前字符串中的位置,若返回值为-1,则 * 表示当前字符串中不含有给定的内容. * @ ...

  6. [转]Doing more with Outlook filter and SQL DASL syntax

    本文转自:https://blogs.msdn.microsoft.com/andrewdelin/2005/05/10/doing-more-with-outlook-filter-and-sql- ...

  7. MES论坛

    MES是智能制造的核心系统,是实现中国制造2025的关键应用系统.MES应用于车间执行层,中文为制造执行系统. 目前MES交流社区比较少,已有的都显得比较杂乱,所以新开了一个MES论坛地址为https ...

  8. 剑指offer 18:树的子结构

    题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 解题思路 验证B是不是A的子树,直觉做法,按照任意次序遍历A树,一旦出现和B树根节点相同的子节点, ...

  9. Python—基础之杂货铺

    列表.元组.字典之前的互相转换 列表与元组的转换 # 列表转换成元组:使用 tuple 函数 num_list = [3, 6, 9] num_tuple = tuple(num_list) prin ...

  10. Python函数基础和函数参数

    函数的定义和函数的调用 return的作用 三种参数的定义 常用的内置函数 len() 函数基础 函数的定义 def 函数名(参数): pass return 表达式 pass在这里表示什么都没有,不 ...