按钮放大缩小跳动效果纯css

瘦瘦瘦瘦不了

已于 2022-09-27 13:26:18 修改

阅读量1.3k

点赞数

分类专栏： CSS HTML 文章标签： css html

于 2022-09-27 13:23:03 首次发布

本文链接：https://blog.csdn.net/dreamy_wx/article/details/127069671

版权

CSS 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<div class="taskBtnBox taskBtnBoxAnimation">
      <button class="taskBtn">开始任务</button>
</div>

.taskBtnBox{
      width:50%;
      height:100px;
      margin:120px auto 0;
      background: #0050b3;
      color:#fff;
      font-size: 35px;
      position: relative;
      border-radius: 60px;
      font-weight: bold;
      .taskBtn{
        width: 100%;
        height:100%;
        background: none;
        border: 0;
        color: #fff;
        font-weight: bold;
        cursor: not-allowed;
      }
    }
    .taskBtnBoxAnimation{
      animation: scaleAnimation 1s ease 0s infinite alternate;
      // animation-play-state: paused;
      animation-play-state: running;
      &:hover{
        animation-play-state: paused;
      }
      .taskBtn{
        cursor: pointer;
      }
    }
  @keyframes scaleAnimation {
    from    { transform: scale(1); }
    20%      { transform: scale(1.1); }
    80% { transform: scale(1.1); }
    100%,to { transform: scale(1); }
  }