用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. oracle自定义函数:将使用点分隔符的编码转成层级码格式的编码

    维护一个旧的系统,表设计中只有编码,而没有其他排序相关的字段,然后根据编码排序出现了顺序错乱的问题. 详细地说,其编码设计是使用[.]分隔符的编码,比如1.1.1.1.1.1.1.1.1.2这样的格式 ...

  2. java高并发系列 - 第4天:JMM相关的一些概念

    JMM(java内存模型),由于并发程序要比串行程序复杂很多,其中一个重要原因是并发程序中数据访问一致性和安全性将会受到严重挑战.如何保证一个线程可以看到正确的数据呢?这个问题看起来很白痴.对于串行程 ...

  3. Java开发桌面程序学习(二)————fxml布局与控件学习

    JavaFx项目 新建完项目,我们的项目有三个文件 Main.java 程序入口类,载入界面并显示 Controller.java 事件处理,与fxml绑定 Sample.fxml 界面 sample ...

  4. SpringBoot(15)—@Conditional注解

    SpringBoot(15)-@Conditional注解 作用 @Conditional是Spring4新提供的注解,它的作用是按照一定的条件进行判断,满足条件的才给容器注册Bean. 一.概述 1 ...

  5. fastjson对于yyyy-MM-dd HH:mm格式的反序列化问题

    原创GrayHJX 发布于2017-03-14 22:56:33 阅读数 6851  收藏 展开 问题:最近在工作中遇到这么一个问题:有个实体类,它有个date类型的属性,当在这个属性加上fastjs ...

  6. 打开excel打印时报“不能使用对象链接和嵌入”

    解决思路: 1.以WIN + R 打开命令行, 在命令行中输入dcomcnfg,打开组件服务. 2.在组件服务窗口中,点击到[控制根节点]->[组件服务]->[计算机]->[我的电脑 ...

  7. C# abstract 和 interface 区别

    抽象类主要用来提供多个派生类可共享的基类的公共定义,它与非抽象类的主要区别如下: 抽象类不能直接实例化. 抽象类中可能包含抽象成员,但非抽象类中不可以. 抽象类不能被密封. 接口具有以下特征 接口类类 ...

  8. 关于es6及以上的js编译成es5

    问题:es6及以上版本在IE浏览器上不能执行起来,但Chrome浏览器上轻松运行,解决兼容IE的问题就需要使用babel:这个可以去babel的官网去查看; 关于babel的简单使用,有两种方式: 1 ...

  9. gradle 参数配置监听

    说明 gradle提供了对project状态配置监听的接口回调,以方便我们来配置一些Project的配置属性,监听主要分为两大类,一种是通过project进行 回调,一种是通过gradle进行回调,作 ...

  10. Flask 异步化

    web网站包含前端和后端, 异步处理可以用在前端, 也可以用在后端.  前端 jquery 进行 ajax 请求时, 可设置 async 属性为 true, 并为 success 设置一个 callb ...