CSS3实现鼠标移动上去链接文字/背景/边框颜色渐变

Forece

9 年前

最近在重新学HTML和CSS，以前都是凭借自己多年的经验自行摸索，从来都没有系统的学习过一遍。这次看了PHP兄弟连做的细说PHP视频。查缺补漏，以前半瓶子逛荡的状态已一去不复返。不过兄弟连的PHP教学，只讲了CSS2和HTML4，对最新的CSS3和HTML5没有涉猎。在一次扒皮实践当中，看到豌豆荚的底部footer不错。本想拔下来，突然发现他底部的链接文字是渐变的。非常好看。于是想尽办法想给他整了出来。

链接文字颜色渐变CSS代码：

1
2
3
4
5
6
7
8
9

a {
color:#333; /* 初始颜色 */
text-decoration:none; /* 去掉链接下划线 */
-webkit-transition: color .4s ease;
-moz-transition: color .4s ease;
-o-transition: color .4s ease;
transition: color .4s ease;
}
a:hover {color: red} /* 最终颜色 */

演示：http://jsfiddle.net/forece/6jm809sn/

其实，除了链接文字颜色渐变，用的最多的还是边框 div 颜色渐变，像一个按钮一样。

边框颜色渐变CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13

.box{ margin:auto; width:300px; background:#AAA; font-size:30px; color:#FFF; text-align:center;
transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-webkit-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
-o-webkit-transition: background 0.5s ease;}

.box:hover{ background:rgb(255,157,0);}

a{
text-decoration:none;
color:white;
}

演示：http://jsfiddle.net/forece/uL0aqncu/

补充：最近在 Alexa.com 看到输入框渐变也挺漂亮的，顺便把代码拔了下来。

HTML代码：

1	<input type="text" class="sdw" />

CSS代码：

1
2
3
4
5
6
7
8
9

sdw:focus{
transition:border linear .2s,box-shadow linear .5s;
-moz-transition:border linear .2s,-moz-box-shadow linear .5s;
-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
outline:none;border-color:rgba(93,149,242,.75);
box-shadow:0 0 8px rgba(93,149,242,.105);
-moz-box-shadow:0 0 8px rgba(93,149,242,.5);
-webkit-box-shadow:0 0 8px rgba(93,149,242,3);
}

PS一句，如果你还在用IE的话，貌似是看不到这些效果的。。

打赏赞