Css实现点击图片旋转动画

效果图

代码语言：javascript复制

  <div class="switch">
      <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190919162145-双上箭头-01.png"
               alt="">
  </div>

代码语言：javascript复制

  .switch {
        width: 32px;
        height: 33px;
        border-radius: 4px;
        background: #EEEEEE;
        border: 1px solid #B7B7B7;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .switch img {
        width: 15px;
        transition: transform .5s;
    }

    .animation {
        transform: rotate(-180deg);
    }

代码语言：javascript复制

   $('.switch').click(function () {
        if ($(this).children('img').hasClass('animation')) {
             $(this).children('img').removeClass('animation')
         } else {
             $(this).children('img').addClass('animation');
         }
    })

动画

0 人点赞