鼠标指向链接时#2 | 字体15种多彩与彩虹的效果

有木有觉得，当你鼠标已经指向链接，如果没有Rase，真的没有这是链接的feel也没有选择和按下去的瘾呢，甚至是不知道它是个链接。

咳咳，这次就发布集合14种以上的彩虹效果吧！
可能博主的审美观被IG的LOGO影响了，其实多彩混合也不错
另外，此贴不是一时间出来的，而是在草稿内荒废很多年，就决定抽时间完成它。

 不一定要用在链接上，也可以用在其他文字，此篇属于“鼠标指向链接时”系列#2。还没看之前的？请点这边

#1  字体的改变（基本篇）  |  #2  字体的改变（色彩篇）

  # 2   C O N T E N T   M E N U   

09  古老的彩虹字体 I
10  最爱的彩虹字体 II
11  沉静的彩虹字体 III
12  渐变彩色图片字体 I
13  渐变の颜色 I
14  渐变の颜色 II
15  直向渐变的多彩色字体 III
16  字体自动渐换多种颜色
17  3D色的立体影子
18  甜甜的彩虹字体 IV
19  欧美系独角兽彩虹图片字体 II

20  七彩横向渐变背景 I
21  七彩横向渐变背景 II +垫高浮现
22  时尚感紫蓝色混色背景 I
23  双色渐变背景 II


   H O W   T O   A D D  T H E   C O D E S   ?   

 主题背景 > 修改模板 HTML

 (Ctrl+F键)查找“a : hover {”字眼。

a: hover {

 把以下你所要的类型代码框内的代码， (Ctrl+C) 复制 & (Ctrl+V) 粘贴 在

“a: hover {”
（蓝色字眼）的下面。

 大概会形成以下例子视图：

a:hover{
你复制的代码会在这里}

 保存主题摸板

----------------------- - 类型9 - ------------------------

指向的字体Change 彩虹字体 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;

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

------------------------ - 类型10 - -------------------------

指向的字体Change 彩虹字体 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；”整个删掉。

----------------------- - 类型11 - ----------------------

指向的字体Change 彩虹字体 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%，可以自定你想要的颜色巴仙率。

------------------------ - 类型12 - ------------------------

指向的字体会渐变3种颜色的效果（使用图片の背景）

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

-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%;

 “.9s”是0.9秒的意思，转换所需的限时。

 比方，我现在设定是在0.9秒内完成移动，所以，当你鼠标碰到的第0.9秒就是第三张图（最终结束），一开始碰它的0.3秒就是第一张图（刚开始），之间的0.6是第二张图（转换中）。

 这3个预览图其实这是个过程，当你的鼠标碰到字体，字体就会转变1、→2再到→3

 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

---------------------- - 类型13 - ----------------------

指向的字体Change to渐变の颜色 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

------------------------ - 类型14 - ----------------------

指向的字体双色渐变の蓝色 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

----------------------- - 类型15 - -----------------------

指向的字体渐变の颜色 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”都是颜色。

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

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

----------------------- - 类型16 - -----------------------

指向的字体它会完全渐变の多种颜色 IV

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

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

代码A

我也不懂怎样说，看图，好久没有错。鼠标触碰的时候它会一直自己换颜色，顺顺的，有时不知道它已经慢慢换了，效果：

 注意这里哦，这不是个单独在a:hover里就可以展现完效果的类型。

如果你已经在把框内代码（代码A）放去“a:hover”后，就接下去看这里↓

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

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

 把以下框框的代码加在a:hover{...}的“}”下面。

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

代码B

 就会形成以下视图，代表完成。

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

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

 以上代码的紫色字眼可更改。

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

 紫色字眼的

“hotpink”、“orange”、“gold”、“springgreen”、“plum”、“deepskyblue”和“violet”是颜色。

 出现的顺序是由上至下。

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

----------------------- - 类型17 - -----------------------

指向的字体它出现 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（字体的颜色      ）

----------------------- - 类型18 - -----------------------

指向的字体Change甜彩虹颜色 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);

就是和类型10和类型11差不多一样的彩虹。

----------------------- - 类型19 - -----------------------

指向的字体Change欧美系独角兽彩虹

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

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 其实也只是普通的彩虹效果啦，不过也会有特效：

跟类型11原理的一样，是使用照片移动所展现的效果。

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

 说明与类型11一样，可参考。

 我在代码中使用的图片：

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

----------------------- - 类型20 - -----------------------

指向的字体会有七彩横向渐变背景

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

-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” 的紫色字体可更换成别的颜色代码。

----------------------- - 类型21 - -----------------------

指向的字体会渐渐出现起楼的渐变背景+Loading 

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

这个就是和刚刚的类型20是一样的，但不同的是添加了从下至↑（起楼或装水）地展示效果。

 注意这里哦，这款不适合单独用在a:hover {}里，如果不嫌麻烦的话可以看以下教程。

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

 (Ctrl+F键)查找“a{”字眼。

a{

 选你要的效果（or）框内的代码加入“a{”的下面或右边。

-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; background-size: 100% 0px;

如果你想要Loading（左到右）的效果，就添加下面的代码，若是要下到上的，请无视。

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

 若要以打开门的方式，可以更换left no-repeat的“left”至“bottom”。

再（Ctrl+F）搜寻“a:hover{”的字眼，把下面框框的代码放到下面。

background-size: 100% 100%;

 保存并完成。

 “a{”比较需要耐心找哦，毕竟单字很容易撞字还是最常用的“a”。

 如果a:hover{找不到，可以尝试使用空格“a:hover {”、“a {”甚至更多可能性。

 原理我来大概说一下，“a”就是链接，"a{...}"内的内容“...”是链接的外型；“a:hover{...}”内的就是鼠标触碰“a”/链接的时候的外型效果。

 整体来说是转换外型的关系。

 此类型代码的方法就是，当它是链接的时候，设定背景量是0%，当鼠标触碰，链接的背景就会升华到100%，形成扩大背景的效果。

----------------------- - 类型22 - -----------------------

指向的字体Change最流行的时尚感紫蓝色混色背景

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

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。

----------------------- - 类型23 - -----------------------

指向的字体双色渐变背景

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

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

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

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

updated .

 注 意 / 提 示

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

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

 预览/例子:

a:hover {
你复制的代码放这里哦}

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

 如果a:hover{找不到，可以尝试使用空格“a:hover {”、“a :hover{”甚至更多可能性。

 不一定要用在链接上，也可以装饰其他地方用，一样要在{}里面。

 渐渐地展现效果，可以加入这行代码（几秒内完成转换的意思），“2”是秒数。

transition: all 2s ease;

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

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