zoukankan      html  css  js  c++  java
  • 点击旋转,再点击恢复初始状态

    今天遇到要做一个点击 + 然后开始旋转动画后变成 x    具体实现如下

    1.HTML

    <div class="box rotate"></div>                  //需要加一个初始状态

    2.CSS

    .box{                //普通样式
      width:100px;
      height:100px;
      background:skyblue;
    }
    .rotate1{             //旋转后的位置
      transform:rotate(45deg);
      transtion:all .3s linear;
      -webkit-transform:rotate(45deg);       //还是兼容一下
      -webkit-transtion:all .3s linear;
    }
    .rotate{                   //初始状态的旋转位置
      transform:rotate(0);
      transtion:all .3s linear;
      -webkit-transform:rotate(0);
      -webkit-transtion:all .3s linear;
    }

    3.JQ

    <script>
      $(function(){
        $(".box").click(function(){
         if($(this).hasClass("rotate")){
            $(this).removeClass("rotate").addClass("rotate1");
         }else{
          $(this).removeClass("rotate1").addClass("rotate");
         }
        })
      })
    </script>

    效果:

     

  • 相关阅读:
    VS2013 使用QCustomPlot等三方库如何配置
    error LNK1112:模块计算机类型"X64" 与目标计算机类型"X86" 冲突
    Qt 获取屏幕当前分辨率
    流程控制
    导航条和工作内容纪要
    js简介
    高度塌陷
    浮动
    文档流
    display和overflow
  • 原文地址:https://www.cnblogs.com/zjjDaily/p/7826286.html
Copyright © 2011-2022 走看看