css的一些小窍门

1.想要做出这个按钮阴影用after伪类，按钮是渐变的，可以用css3的渐变，注意父容器要相对定位

.collect-submit{background: -webkit-linear-gradient(#fdce43,#fbbc14);border:none;border-radius: 4px;
   height:0.84rem;line-height: 0.84rem;width:78%;margin:0 auto;color:#fff;font-size: 0.36rem;position: relative;margin-top:0.3rem;}
.collect-submit:after{
   content: "";
   width: 100%;
   border-top: 5px solid #c79700;
   display: inline-block;
   position: absolute;
   bottom: -2px;
   left: 0;
   -webkit-border-bottom-left-radius: 5px;
   border-bottom-left-radius: 5px;
   -webkit-border-bottom-right-radius: 5px;
   border-bottom-right-radius: 5px;
}

 

2.按钮按下去的动画效果

.button--active {
 -webkit-animation: anim-effect-sonar 0.3s ease-out forwards;
 animation: anim-effect-sonar 0.3s ease-out forwards;
}

@-webkit-keyframes anim-effect-sonar {
 0% {
    opacity: 1;
    -webkit-transform: scale3d(0.9, 0.9, 1);
    transform: scale3d(0.9, 0.9, 1);
 }
 to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
 }
}

调用：

   $(".sign").click(function(){

   $(".sign-click").addClass('button--active').addClass('animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){
      //动画完成之后把动画移除，这样下次进入到这个页面就可以再次进行动画
      $(this).removeClass('button--active').removeClass('animated');
      $(".sign").addClass('fn-hide');
      $(".sign-yes").removeClass('fn-hide');
   });
});
3.想要左右线居中

.layer-main>h1:before {

1. content: "";
2. width: 12%;
3. margin-right: 5%;
4. border-top: 1px solid #d1d1d1;
5. display: inline-block;
6. vertical-align: middle;

}

.layer-main>h1:after {

1. content: "";
2. width: 12%;
3. margin-right: 5%;
4. border-top: 1px solid #d1d1d1;
5. display: inline-block;
6. vertical-align: middle;

}

4.想要div内的文字上下垂直居中,采用盒子模型，一定要加display:-webkit-box;,不然不起作用

5.css在移动端的图片精灵，宽高都是原来工具生成的一半的大小

.img-spires{background:url(../image/img.png)  no-repeat;float:left;background-size:cover;}
.img_1{height:20px;width:15px;background-position:0 0;}
.img_3{height:20px;width:15px;background-position:0 -20px;}
.img_2{height:20px;width:15px;background-position:0 -40px;}