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
