效果：在任意HTML标签上增加样式类 f-color-control 就可以为此元素增加hover和avtive时颜色的变化;
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.btn{
width: 80px;
line-height: 30px;
cursor:pointer;
padding: 12px;
text-align: center;
font-size: 20px;
color: #fff;
}
.f-color-control{
transform: scale(1);
border-radius:6px;
background-color: #ff6700;
}
.f-color-control:before{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index:-1;
border-radius:6px;
background:rgba(0,0,0,.1);
}
.f-color-control:after{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index:-1;
border-radius:6px;
background:rgba(255,255,255,.3);
}
.f-color-control:hover:before{
content:"";
}
.f-color-control:active:after{
content:"";
}
</style>
</head>
<body>
<div>
<div class="btn f-color-control">登录</div>
</div>
</body>
</html>
时间： 2024-09-30 03:20:43