HTML代码
<!doctype html>
<head>
<title>hover按钮过渡效果</title>
</head>
<body>
<a href="#" id="example">登 录</a>
</body>
CSS代码
#example {
text-align: center;
color: White;
background: #4490f7;
text-decoration: none;
padding: 10px 95px;
border-radius: 5px;
opacity: 0.6; //主要代码
transition: opacity 1s; //主要代码
}
#example:hover {
opacity: 1; //主要代码
/* transition-property: opacity;
transition-duration: 1.5s; */
}
实现原理:先将按钮的透明度设为0.6(opacity: 0.6;),鼠标划过时(hover),按钮的透明度变为1(opacity: 1;)。transition: opacity 1s;控制过渡属性为透明度(opacity),持续1s。
动图演示:
Demo链接:http://129.204.144.144/Demo/hover%E6%8C%89%E9%92%AE%E8%BF%87%E6%B8%A1%E6%95%88%E6%9E%9C.html