用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. EfficientNet: Rethinking Model Scaling for Convolutional Neural Networks

    增加模型精度的方法有增加网络的深度,特征图的通道数以及分辨率(如下图a-d所示).这篇文章研究了模型缩放,发现仔细平衡网络的深度.宽度和分辨率可以获得更好的性能(下图e).在此基础上,提出了一种新的缩 ...

  2. Runtime 类初探

    Runtime类 认识 Runtime类 在每一个JVM进程中都会存在一个Runtime类,这个类的主要功能是取得一些与运行时有关的环境属性或创建进程等操作. 在Runtime类定义的时候,它的构造方 ...

  3. CarTool 使用,获取图片资源

    程序:gitHub: 项目地址 使用方法: 1.拿到资源包 在itunes里找到喜欢的应用,然后下载,直接将app拖到桌面.得到一个一个ipa资源包,如图 2.将资源包改成zip格式 3.解压zip资 ...

  4. 使用百度的webuploader进行附件上传

    相较于之前使用的上传空间的优点:支持html5,不用再安装flash插件,没有大小限制,分片以后上传,上传以后再进行合并. 前端js代码 <script type="text/java ...

  5. [b0034] python 归纳 (十九)_线程同步_条件变量

    代码: # -*- coding: utf-8 -*- """ 学习线程同步,使用条件变量 逻辑: 生产消费者模型 一个有3个大小的产品库,一个生产者负责生产,一个消费者 ...

  6. 需求规格说明书(final)

    1. 引言 1.1 编写目的 该文档是关于微信小程序自习吧的功能和性能描述,重点描述了小程序的功能需求,并作为小程序开发设计阶段的主要输入. 本文档的预期读者包括:triple兔成员,软件工程老师,用 ...

  7. shell中的fg 命令

    fg(前台执行) frontground bg(后台执行) background & daemon 总结: 一般命令在前台执行(fg),执行完毕后,控制返回给用户. 在命令后面加上&, ...

  8. NGINX动态增加模块,平滑升级

    这是一个小心活,不过,多操作几次,也就熟悉了. 参考URL: https://segmentfault.com/a/1190000006755963 一,安装nginx依赖包. yum install ...

  9. 15.Java基础_初探对象

    package pack1; public class Phone { //成员变量 String brand; int price; //成员方法 public void call(){ Syste ...

  10. pwn-Stack Overflow

    地址 https://cgctf.nuptsast.com/challenges#Pwn 先观察一下,是一个32位的程序,而且只开了NX保护 用IDA看看伪代码,重点在message和pwnme这两个 ...