添加按钮切换时过渡动画以及鼠标按下的一个动画效果,让系统不在单调,直接展示代码
以下代码纯属个人记录笔记,更多动画效果参考这个链接:动画效果链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="Btn0" onclick="btnClick(0)" class="pitchBtn">按钮1</div>
<div id="Btn1" onclick="btnClick(1)" class="noPitch">按钮2</div>
</body>
<script>
btnClick(0);
function btnClick(id) {
console.log(id)
var list = [
{ 'Btn': 'Btn0' },
{ 'Btn': 'Btn1' },
]
for (var i in list) {
if (i == id) {
document.getElementById(list[i].Btn).style.background = "#FD9800";
}
else {
document.getElementById(list[i].Btn).style.background = "#021943";
}
}
}
</script>
<style>
/* 按钮选中样式 */
.pitchBtn {
width: 124px;
height: 34px;
background: #fd9800;
border: 1px solid #877751;
border-radius: 17px;
text-align: center;
color: #FFF;
line-height: 34px;
box-shadow: 1px 1px 8px 0px rgba(9, 30, 68, 0.43);
transition: all .4s ease;
}
/* 按钮未选择样式 */
.noPitch {
width: 124px;
height: 34px;
background: #021943;
text-align: center;
color: #FFF;
border: 1px solid #877751;
border-radius: 17px;
line-height: 34px;
margin-top: 7px;
box-shadow: 1px 1px 8px 0px rgba(9, 30, 68, 0.43);
transition: all .4s ease;
}
/* 按下动画 */
.pitchBtn:active {
transform: translateY(5px);
transition: 200ms;
}
.noPitch:active {
transform: translateY(5px);
transition: 200ms;
}
</style>
</html>