移动端按钮交互变色实
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端按钮交互变色实相关的知识，希望对你有一定的参考价值。
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
这个已经很多人写了，就不用写例子了
以上是关于移动端按钮交互变色实的主要内容，如果未能解决你的问题，请参考以下文章
Cg入门20：Fragment shader - 片段级模型动态变色（实现汽车动态换漆）