zoukankan      html  css  js  c++  java
  • css3动画--位移加阴影

    animation: name duration timing-function delay iteration-count direction;
    描述
    animation-name 规定需要绑定到选择器的 keyframe 名称。。
    animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
    animation-timing-function 规定动画的速度曲线。
    animation-delay 规定在动画开始之前的延迟。
    animation-iteration-count 规定动画应该播放的次数。
    animation-direction 规定是否应该轮流反向播放动画。
     
     
     
     
    定义动画:
    @keyframes mymove
    {
    from {left:0px;border-left: 0px solid #d91f24;}
    to {left:3px;border-left: 4px solid #d91f24; box-shadow: 0px 0px 20px rgba(150, 150, 150, 0.4);}
    }
    @-webkit-keyframes mymove /*Safari and Chrome*/
    {
    from {left:0px;border-left: 0px solid #d91f24;}
    to {left:3px;border-left: 4px solid #d91f24;box-shadow: 0px 0px 20px rgba(150, 150, 150, 0.4);}
    }
     
    通过添加类的方式触发:
    .brand_li{
    animation:mymove 450ms ;
    -webkit-animation:mymove 450ms ;      //infinite  循环播放
    animation-fill-mode: forwards;  //定格在动画播放完之后
    }
    jq添加类:
    $(".list_content>ul>a>li").hover(
    function(){
      $(this).addClass("brand_li");
      },
      function(){
        $(this).removeClass("brand_li");
      }
    )
  • 相关阅读:
    架构设计
    第七章
    第六章
    第五章
    第四章
    第三章
    第二章
    第一章
    链表中环
    实现链表中的部分翻转
  • 原文地址:https://www.cnblogs.com/1234wu/p/10641720.html
Copyright © 2011-2022 走看看