常用CSS3


.trans-3{-webkit-transition: all 0.35s linear; -moz-transition: all 0.35s linear; -ms-transition: all 0.35s linear; -o-transition: all 0.35s linear; transition: all 0.35s linear;}
.trans-8{-webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
.trans-12{-webkit-transition: all 1.2s; -moz-transition: all 1.2s; -ms-transition: all 1.2s; -o-transition: all 1.2s; transition: all 1.2s;}
.scale-0x{-webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75);}
.scale-1x{-webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05);}
.radius-5{-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.radius-15{-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}
.radius-half{-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
.shadow{-webkit-box-shadow: 7px 7px 7px #dad6d6; -moz-box-shadow: 7px 7px 7px #dad6d6; box-shadow: 7px 7px 7px #dad6d6;}
.shadow-all{-webkit-box-shadow: 0 15px 15px #f2f2f2; -moz-box-shadow: 0 15px 15px #f2f2f2; box-shadow: 0 15px 15px #f2f2f2;}  

 $(function(){
      $(".imgbox").hover(function(){
        $(this).find("img").eq(0).addClass("scale-1x")
      },function(){
        $(this).find("img").eq(0).removeClass("scale-1x")
      })  
      //产品列表
      $(".product ul li").hover(function(){
        $(this).stop().animate({top: "-10px"},100)
        $(this).addClass("shadow")
      },function(){
        $(this).stop().animate({top: "0px"},100)
        $(this).removeClass("shadow")
      })        
    })

此处评论已关闭