演示
一些有创意的鼠标经过链接时的样式
移动鼠标至链接上查看效果
A web link.
a {
color: rgb(8, 155, 235);
text-decoration: none;
transition: .3s;
position: relative;
}
a::before {
content: "";
height: 2px;
width: 0;
position: absolute;
bottom: 0;
left: 0;
background-color: rgb(8, 155, 235);
transition: .3s;
}
a:hover::before {
width: 100%;
}
移动鼠标至链接上查看效果
A web link.
a {
color: rgb(8, 155, 235);
text-decoration: none;
transition: .3s;
position: relative;
}
a::before {
content: "";
height: 2px;
width: 0;
position: absolute;
bottom: 0;
right: 0;
background-color: rgb(8, 155, 235);
transition: .3s;
}
a:hover::before {
left: 0;
width: 100%;
}
移动鼠标至链接上查看效果
A web link.
a {
color: rgb(8, 155, 235);
text-decoration: none;
border-bottom:2px solid rgb(8, 155, 235);
position: relative;
}
a::before {
content: "";
height: 2px;
width: 100%;
position: absolute;
bottom: -2px;
left: 0;
background: linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1));
background-size: 0% 2px;
background-position: 0% 100%;
background-repeat: no-repeat;
transition: .3s;
}
a:hover::before {
background-size: 100% 2px;
}
移动鼠标至链接上查看效果
A web link.
a {
color: rgb(8, 155, 235);
text-decoration: none;
border-bottom:2px solid rgb(8, 155, 235);
position: relative;
}
a::before {
content: "";
height: 2px;
width: 0%;
position: absolute;
bottom: -2px;
right: 0;
background: linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1));
background-size: 100% 2px;
background-position: -100% 100%;
background-repeat: no-repeat;
transition: .3s;
}
a:hover::before {
left: 0;
width: 100%;
}
移动鼠标至链接上查看效果
A web link.
a {
color: rgb(8, 155, 235);
background: linear-gradient(to right, midnightblue 50%, rgb(8, 155, 235) 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-position: 100%;
transition: background-position 300ms ease;
text-decoration: none;
}
a:hover {
background-position: 0 100%;
}
移动鼠标至链接上查看效果
5.1A web link.
A web link.
a {
color: rgb(8, 155, 235);
background-image: linear-gradient( to right, rgba(255, 0, 180, 1), rgb(0, 200, 40) 50%, rgb(8, 155, 235) 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-position: 100%;
transition: background-position 300ms ease;
text-decoration: none;
}
a:hover {
background-position: 0 100%;
}
移动鼠标至链接上查看效果
A web link.
a {
color: rgb(8, 155, 235);
text-decoration: none;
transition: .3s;
position: relative;
}
a::before {
z-index:-1;
content: "";
height: 100%;
width: 0;
position: absolute;
top: 0;
left: 0;
background-color: rgb(8, 155, 235);
transition: .3s;
}
a:hover{
color: #fff;
}
a:hover::before{
width: 100%;
}
移动鼠标至链接上查看效果
A web link.
a {
color: rgb(8, 155, 235);
text-decoration: none;
transition: .3s;
position: relative;
}
a::before {
z-index:-1;
content: "";
height: 100%;
width: 0;
position: absolute;
top: 0;
right: 0;
background-color: rgb(8, 155, 235);
transition: .3s;
}
a:hover{
color: #fff;
}
a:hover::before{
left:0;
width: 100%;
}
移动鼠标至链接上查看效果
A web link.
a {
color: rgb(8, 155, 235);
text-decoration: none;
transition: .3s;
position: relative;
}
a::before {
z-index:-1;
content: "";
height: 100%;
position: absolute;
top: 0;
left:0;
width: 100%;
transform: scaleX(0);
background-color: rgb(8, 155, 235);
transition: .3s;
}
a:hover{
color: #fff;
}
a:hover::before{
transform: scaleX(1);
}
版权声明：[自由转载-注明出处-非商用-非衍生] (知识共享许可协议)
