用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. C# redis StackExchange

    1.Install-Package StackExchange -v 2.0.601 2.using StackExchange.Redis; 3. static void StackExchange ...

  2. Flask 教程 第二章:模板

    本文翻译自 The Flask Mega-Tutorial Part II: Templates 在Flask Mega-Tutorial系列的第二部分中,我将讨论如何使用模板. 学习完第一章之后,你 ...

  3. CSS3 盒模型---css初始化会用到:box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

    CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...

  4. Sublime设置格式化代码快捷键ctrl+shift+r

    1.以管理员身份运行sublime 2.首选项---按键绑定-用户,将以下代码复制即可(这里注意不要忘记在最后一行添加逗号哦) { "keys": ["ctrl+shif ...

  5. MySQL 同一Windows系统上安装多个数据库

    Step 1:拷贝一份MySQL整个安装文件,并拷贝一份 my.ini 文件放置安装目录下,然后修改以下内容.注意 port 不能设置为默认的3306,这里我们设置为3307端口. basedir=C ...

  6. Java学习笔记(4)--- 变量类型,修饰符

    1.变量类型: a.定义: 和C++差不多,就是: type identifier [ = value][, identifier [= value] ...]: type为Java数据类型.iden ...

  7. vue 表格组件 有事件交互(二)

    04==>v-if下面可以嵌套 同级的 v-if 和v-node如下若是第一个v-if没有下面的就不可能显示出来的. <span v-if="!single" @cli ...

  8. web-文件包含

    提示 构造payload ?file=flag.php 得到一串字符,那么我们用PHP伪协议尝试一下 构造payload ?file=php://filter/read=convert.base64- ...

  9. day54_9_18视图层某内部原理(fbv和cbv)与模板层

    一.render内部原理. 在render中往往需要返回三个参数,request,模板和一些键值对. 键值对中存储的是需要对模板渲染的值. 如果手动实现可以如下: from django.templa ...

  10. Java集合源码分析之ArrayList(JDK1.8)

    package annoction; import java.util.*; import java.util.function.Consumer; import java.util.function ...