Css实现点击图片旋转动画

时间:2022-07-24
本文章向大家介绍Css实现点击图片旋转动画，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

效果图 

  <div class="switch">
      <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190919162145-%E5%8F%8C%E4%B8%8A%E7%AE%AD%E5%A4%B4-01.png"
               alt="">
  </div>
  .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);
    }
   $('.switch').click(function () {
        if ($(this).children('img').hasClass('animation')) {
             $(this).children('img').removeClass('animation')
         } else {
             $(this).children('img').addClass('animation');
         }
    })

随机文章
WEB前端知识点必读
最近更新