按钮切换添加动画效果

最新推荐文章于 2024-09-02 20:34:02 发布

顾北...

最新推荐文章于 2024-09-02 20:34:02 发布

阅读量91

点赞数

文章标签： css 动画

本文链接：https://blog.csdn.net/qq_51346773/article/details/134662601

版权

添加按钮切换时过渡动画以及鼠标按下的一个动画效果，让系统不在单调，直接展示代码

以下代码纯属个人记录笔记，更多动画效果参考这个链接：动画效果链接

<!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>