开发者社区> 问答> 正文

CSS3 动画(简单动画的实现,如旋转等)

CSS3 动画(简单动画的实现,如旋转等)

展开
收起
茶什i 2019-11-18 16:08:34 727 0
1 条回答
写回答
取消 提交回答
  • 让一个 div 元素旋转 360 度示例

    div 的样式结构:
    div {
      margin: 50px auto;
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    
    

    设置旋转属性的类名:

    div.rotate {
                  /* 旋转360度 */
                transform: rotate(360deg);
                  /* all表示所有属性,1s表示在一秒的时间完成动画 */
                transition: all 1s;
    }
    
    
    transition 有四个属性:
    
    property: 规定应用过渡的 CSS 属性的名称。
    
    duration: 定义过渡效果花费的时间。默认是 0,单位是 s。
    
    timing-function: 规定过渡效果的时间曲线。默认是 "ease"。匀速'linear',加速'ease-in',减速'ease-out',先快后慢'ease-in-out'。
    
    delay: 规定过渡效果何时开始。默认是 0。单位 s。
    
    可以连写: transition: property duration timing-function delay;
    
    

    给 div 元素设置鼠标移入时旋转,也就是给它加上.rotate 类名.鼠标移出时移除类名

    $(function() {
      $("div")
        .mouseenter(function() {
          $(this).addClass("rotate");
        })
        .mouseleave(function() {
          $(this).removeClass("rotate");
        });
    });
    
    2019-11-18 16:11:30
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载