Css实现点击图片旋转动画

最新推荐文章于 2024-08-08 19:32:21 发布

明知山_

最新推荐文章于 2024-08-08 19:32:21 发布

阅读量5.6k

点赞数 3

分类专栏： Css

本文链接：https://blog.csdn.net/AK852369/article/details/101028048

版权

Css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在这里插入图片描述

  <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');
         }
    })