其实非常的简单，添加一个active伪类就可以了。
且看这个例子：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>订单确认</title>
<meta name="viewport" content="width=device-width initial-scale=1.0">
<style>
*{
margin:0;
}
.wenzi{
font-size: 28px;
text-align: center;
}
#yuan{
height:100px;
width:100px;
background-color: #8BC34A;
margin:0 auto;
border-radius: 50px;
text-align: center;
line-height: 100px;
font-size: 20px;
}
#yuan:active{
background-color: #659F21;
}
</style>
</head>
<body>
<div style="height:100px;"></div>
<div class="wenzi">订单确认：元</div>
<div style="height: 50px;"></div>
<div id="yuan">支付</div>
</body>
</html>
最终实现的效果：
GIF.gif
网友评论