HTML 代码：
<body>
<a class="anniu" href="http://www.baidu.com/">
百度一下
</a>
</body>
CSS 代码：
/* CSS Document */
.anniu{
display:block;
width:120px;
height:40px;
background-color:#333333;
color:#FFFFFF;
text-align:center;
font-size:18px;
line-height:40px;
border-radius: 25px;
border:none;
box-shadow:none;
text-decoration: none;
transition: box-shadow 0.5s;
-webkit-transition: box-shadow 0.5s;
}
.anniu:hover{
box-shadow:0px 0px 5px 1px #808080;
}
.anniu:active{
box-shadow:0px 0px 5px 1px #FF0000;
}
详解
链接样式：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
transition属性：
1、指定CSS属性的name，transition效果
2、transition效果需要指定多少秒或毫秒才能完成
3、指定transition效果的转速曲线
4、定义transition效果开始的时候
原文地址：https://www.cnblogs.com/blackfriday/p/8835330.html
时间： 2024-11-06 09:32:33