美化 | 15种多彩和彩虹字体的效果

咳咳，这次就发布集合14种以上的彩虹效果吧！
可能博主的审美观被IG的LOGO影响了，其实多彩混合也不错

  C O N T E N T   M E N U   

01  古老的彩虹字体 I
02  最爱的彩虹字体 II
03  沉静的彩虹字体 III
04  渐变彩色图片字体 I
05  渐变の颜色 I
06  渐变の颜色 II
07  直向渐变的多彩色字体 III
08  字体自动渐换多种颜色
09  3D色的立体影子 I
10  甜甜的彩虹字体 IV
11  欧美系独角兽彩虹图片字体 II
12  浅浅的字体颜色影子 II

13  七彩横向渐变背景 I
14  时尚感紫蓝色混色背景 I
15  双色渐变背景 II

-------------------------------------------------------

1   彩虹字体 I

--------------------------------------------------------

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)); background-image: 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; background-clip: text;

这是最古老而最鲜艳的彩虹城效果 

----------------------------------------------------------

2    彩虹字体 II

-----------------------------------------------------------

-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image:-webkit-gradient(linear, left top, right top, from(#FFD145), to(#FF7B7B)); background-image:-webkit-linear-gradient(left, #FFD031, #FF7088, #5FC2FF, #9085fb, #67FDBC); background-image:-moz-linear-gradient(left, #FFD031, #FF7088, #73a6df, #9085fb, #67FDBC); background-image:-ms-linear-gradient(left, #FFD031, #FF7088, #5FC2FF, #9085fb, #67FDBC); background-image:-o-linear-gradient(left, #FFD031, #FF7088, #73a6df, #9085fb, #67FDBC); color: #444444;

真的好喜欢啊~虽然随便调的 

 类似的“(#FFD145)”是颜色代码，可自行更换、调色。

 “color: #444444;”是字体颜色，代码中的“#444444”可更换。

 也可以把“color:#444444；”整个删掉。

---------------------------------------------------------

3    彩虹字体 III

---------------------------------------------------------

background-image: linear-gradient(90deg, #f79533 0%, #f37055 15%, #ef4e7b 30%, #a166ab 44%, #5073b8 58%, #1098ad 72%, #07b39b 86%, #6dba82 100%); background-size: cover; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent;

其实这款我觉得和上面的类型10（版本II）有像到，可是它是较深色也较暗的。但它们的代码与命令方法与版本II是不一样的，稳定性也很强。

 可更换紫色字眼，这里哪些是颜色代码？“#f79533”

 30%、100%，可以自定你想要的颜色巴仙率。

----------------------------------------------------------

4 （使用彩虹图片の背景）

----------------------------------------------------------

-webkit-transition-duration: .9s; -webkit-background-clip:text; -webkit-text-fill-color: transparent; background-image:url(http://cdn29.us1.fansshare.com/images/wallpapersforios7/fondos-de-pantalla-para-ipad-con-ios-wallpapers-for-wallpaperswallpapers-glow-pink-1368532915.jpg); background-position:0% 100%;

 background-position是背景的位置，你可根据你的图片效果来调整0% 100%。

 可更换背景图片“background-image:url(你的图片网址放这里)”。

 我代码中使用的网址是“http://cdn29.us1.fansshare.com/images/wallpapersforios7/fondos-de-pantalla-para-ipad-con-ios-wallpapers-for-wallpaperswallpapers-glow-pink-1368532915.jpg”

 若失效后，可以使用我的链接：

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKWuCJuCT9dE7Wz9z_Bd8rlioyrUbFrXXx74IfBuqTd7uLG_KLdoxhnzoxHQ7eJu39FTMw4eGGKnOTrVLF_-25QIw5mraDopaCqgN5IqMFBccOdDBFOLjRpuLYt7kpLkGg-1LH4cUOP3k/s320/fondos-de-pantalla-para-ipad-con-ios-wallpapers-for-wallpaperswallpapers-glow-pink-1368532915.jpg

-------------------------------------------------------

5   渐变の颜色 I

---------------------------------------------------------

background: -webkit-linear-gradient(left, #FF7078, #FF3F89); background: linear-gradient(to right, #FF7078, #FF3F89); -webkit-background-clip: text; background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent; background: -webkit-linear-gradient(left, #FF3F89, #FF7078); background: linear-gradient(to right, #FF3F89, #3EE6FF); -webkit-background-clip: text; background-clip: text;

嗯，我喜欢的配色就是这样的，简直大爱，做很多出来都感觉大同小异啊，呵呵其实提取的颜色不多，只需要2个的半颜色，但它的渐浅效果看上去好像有很多种颜色~

类似“#FF7078”“#FF3F89”的代码 ，你可以把代码换到你喜欢的颜色:3

----------------------------------------------------------

6  渐变の蓝色 II

---------------------------------------------------------

background: -webkit-linear-gradient(left, #28FCEE, #095475); background: linear-gradient(to right, #28FCEE, #095475); -webkit-background-clip: text; background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent; background: -webkit-linear-gradient(left, #00D1E4, #095475); background: linear-gradient(to right, #14ECFF, #0C87BB); -webkit-background-clip: text; background-clip: text;

渐变的颜色，蓝色版

 #28FCEE #095475，你可以把紫色字眼换到你喜欢的颜色:3

---------------------------------------------------

7  渐变の颜色 III

---------------------------------------------------------

-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, cyan), color-stop(16%, aquamarine), color-stop(32%, aqua), color-stop(48%, skyblue), color-stop(60%, plum), color-stop(66%,orchid), color-stop(1.00, lavenderblush));

之前show的都是侧边渐浅，这个呢就是上下的渐浅，这颜色一看又是我配的，哈哈。

 框内代码中的XX%可自行更改想要的巴仙率，例子：“60%，plum”

“plum”是紫色。

 框内代码中的“cyan”、“aquamarine”、“aqua”、“skyblue”、“plum”、“orchid”和“lavenderblush”都是颜色。

 上面就是字体的下面直到字体的下面，渐浅的颜色排序。

 可参考下图更改，想要更多，就请自行寻找了我懒惰放了。

--------------------------------------------------------

8   渐变の多种颜色 IV

---------------------------------------------------------

margin-bottom: 0.25em; color: white; -webkit-animation: rainbow 20s infinite alternate; animation: rainbow 20s infinite alternate;

 注意这里哦，如果你已经在把框内代码放进去后，就接下去看这里↓

只是加多一个步骤，（加入Rainbow代码），请你跟我这样做

 同样是主题背景 > 修改模板 HTML

 搜寻（Ctrl+F）“</style>”代码。

</style>

 把以下框框的代码加在搜寻代码“</style>”的上面。

@keyframes rainbow { 0% {color: hotpink ;} 14% {color: orange;} 28% {color: gold;} 42% {color: springgreen;} 66% {color: plum;} 80% {color: deepskyblue;} 100% {color: violet;} }

Rainbow代码

 颜色代码在Rainbow代码中更改。

 紫色字眼的

“hotpink”、“orange”、“gold”、“springgreen”、“plum”、“deepskyblue”和“violet”是颜色，可更换↓。

 顺序是由上至下。

 可参考下图更改，想要更多，就请自行寻找了我懒惰放了。

--------------------------------------------------------

9    3D 立体影子

---------------------------------------------------------

text-shadow: 1.3px 1px 0 #FF57B7;color:#00EFFF;

我觉得挺成功的配色，就加进来了其实也不算是3D因为我只加一个影子

 紫色字眼可自行更改

text-shadow:1.3px 1px 0 #FF57B7 ; color: #00eFFF；

 text-shadow：1.3px 1px 0 #FF57B7 ; 

 “1.3”px是影子离本字体多右边；“1”px是影子离本字体多下面。

 代码中的“#FF57B7”（字体影子颜色       ）

 color:#00EFFF（字体的颜色      ）

--------------------------------------------------------

10    甜彩虹颜色 IV

---------------------------------------------------------

-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);

就是和上面那些差不多一样的彩虹。

----------------------------------------------------------

11   欧美系独角兽彩虹

---------------------------------------------------------

color: #FFF;-webkit-transition-duration: 1s; -webkit-background-clip:text; -webkit-text-fill-color: transparent; background-image:url(https://s2.favim.com/mini/140609/gradient-pastel-rainbow-tumblr-Favim.com-1827961.png); background-position:10% 90%;

看到标题都好笑~欧美系独角兽彩虹macam yes 其实也只是普通的彩虹啦，是使用照片所展现的效果。

 background-image:url(你的图片网址丢这里)；

 我在代码中使用的图片：

https://s2.favim.com/mini/140609/gradient-pastel-rainbow-tumblr-Favim.com-1827961.png

--------------------------------------------------------

12    浅浅的字体影子

---------------------------------------------------------

text-shadow: 0px 0px 20px yellow, 0px 0px 5px #fff

 要换别的颜色就更换掉 yellow 字眼吧。

---------------------------------------------------------

13    七彩横向渐变背景

---------------------------------------------------------

-webkit-transition: background-size .9s; background: #09f; background: -webkit-linear-gradient(#C6FFFF,#FFE5F7 ) bottom no-repeat; background: linear-gradient( #FFFFE5,#FFE5F7,#E5FFEC) bottom no-repeat;

我这次使用马卡龙款/糖果色，因为觉得太深好像不太漂亮，个人眼光。

 

 类似“#C6FFFF”“#FF35F7”“#E5DDEC” 的紫色字体可更换成别的颜色代码。

--------------------------------------------------------

14     紫蓝色混色背景

---------------------------------------------------------

background-image: linear-gradient(135deg, #09f, #cc2fdc); background-image: -webkit-linear-gradient(135deg, #09f, #cc2fdc); box-shadow: 2px 1px 20x 1px #000; -webkit-box-shadow: 2px 2x 20px 2px #000;

最流行与时尚感~我觉得它更适合在有形状，比如圆形与正方形，不太适合使用在文字。

嘛，其实也挺漂亮的，看博客外型搭不搭噜

 #09f,#cc2fdc的类似的，都是颜色代码。

 box-shadow是格子的影子，2px 1px 20px 1px #000。

--------------------------------------------------------

15     双色渐变背景

---------------------------------------------------------

background-image: -webkit-linear-gradient(left, #E1FEA2, #FDFFD7);

对，只有两种颜色的渐变背景。

 #E1FEA2, #FDFFD7 你只需要更改这两处到别的颜色代码。

updated .

 注 意 / 提 示

 倘若你的{...} 里（黄字处），原本已经存在有代码，请删除后才加入新代码哦，因为原本已经有的美化代码，可能会相撞美化命令。

 内容必须要在“{”和“}”之间/里面。

 预览/例子:

xxx {
你复制的代码放这里哦}

 博主标记为紫色的字眼，可自行修改哦。
 #FFB6B6 =颜色代码(粉字可换)

 路过可留迹、抱走请评论哦，有颗感恩的心能使你更快乐、知足。
 方便用的颜色代码提取器 点它获取你想要的颜色

  = 解释 / 说明
  = 注意 / 提示
  = 温馨提示 / 其他