web开发过程中，移动端按钮交互效果，点击按钮变色
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
document.body.addEventListener(‘touchstart‘, function () {});
</script>
<style>
.btn{
font-size: 1.5em;
line-height: 2em;
text-align: center;
color: #fff;
background: #ce4f54;
width: 200px;
}
.btn:hover,
.btn:active,
.btn:focus{
background: #043d5d;
}
</style>
<title>无标题文档</title>
</head>
<body>
<div class="btn">测试Test</div>
</body>
</html>
如果不绑定事件，在pc和安卓上可以实现
绑定事件为了在ios中生效;
使用css3属性实现缓交互
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.btn{
font-size: 1.5em;
line-height: 2em;
text-align: center;
color: #fff;
background: #ce4f54;
width: 200px;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.btn:hover,
.btn:active{
background: #043d5d;
}
</style>
<title>无标题文档</title>
</head>
<body>
<div class="btn">测试Test</div>
</body>
</html>
3、通过js操作class
这个已经很多人写了，就不用写例子了
时间： 2024-10-26 23:04:50