css有用的代码块

1. 箭头代码

a{
　　position:relative;
　　float:left;
　　height: 30px;
　　line-height: 30px;
　　padding: 0 20px;
　　font-size: 14px;
　　background-color: #686ce8;
　　color: #fff;
}

a:hover:after,a.active:after{
　　content: '';
　　position: absolute;
　　top: 25px;
　　left: 45%;
　　padding: 4px;
　　background-color: inherit;
　　transform: rotate(45deg);
　　border-radius: 2px;
}
a.active{
　　background: #686ce8;
　　color: #fff;
}

注意inherit属性的设置，这样也可以设置border-radius值

2. 加载动画
a.图片转动的加载动画     

/* sass写法   loading 加载动画 start */
.loading {
   position: relative;
   100%;
   height:100%;
   .loader {
      position: absolute;
      30px;
     height: 30px;
     top: 50%;
     left: 50%;
     -webkit-transform: transition(50%, 50%);
     transform: transition(50%, 50%);
     /*-webkit-box-shadow: black 0 0 4px;*/
     /*position: relative;*/
     /*text-indent: -9999em;*/
     -webkit-animation: load5 1.1s infinite ease;
     animation: load5 1.1s infinite ease;
     background-image: url($imgUrl + 'loading.png');
     background-position: 0 0;
     background-size: cover;
   }
}



@-webkit-keyframes load5 {
  0% {
    // background-image: url(/resource/images/base/loading_1.png);
    transform: scale(1) rotate(0deg);
  }
  10% {
    // background-image: url(/resource/images/base/loading_2.png);
    transform: scale(1) rotate(45deg);
  }
  20% {
    // background-image: url(/resource/images/base/loading_3.png);
    transform: scale(1) rotate(90deg);
  }
  30% {
    // background-image: url(/resource/images/base/loading_4.png);
    transform: scale(1) rotate(135deg);
  }
  40% {
    // background-image: url(/resource/images/base/loading_5.png);
    transform: scale(1) rotate(180deg);
  }
  50% {
    // background-image: url(/resource/images/base/loading_6.png);
    transform: scale(1) rotate(225deg);
  }
  60% {
    // background-image: url(/resource/images/base/loading_7.png);
    transform: scale(1) rotate(270deg);
  }
  70% {
    // background-image: url(/resource/images/base/loading_8.png);
    transform: scale(1) rotate(315deg);
  }
  80% {
    // background-image: url(/resource/images/base/loading_9.png);
    transform: scale(1) rotate(315deg);
  }
  90% {
    // background-image: url(/resource/images/base/loading_10.png);
    transform: scale(1) rotate(315deg);
  }
  100% {
    // background-image: url(/resource/images/base/loading_1.png);
    transform: scale(1) rotate(360deg);
  }
}

@keyframes load5 {
  0% {
    // background-image: url(/resource/images/base/loading_1.png);
    transform: scale(1) rotate(0deg);
  }
  10% {
    // background-image: url(/resource/images/base/loading_2.png);
    transform: scale(1) rotate(45deg);
  }
  20% {
    // background-image: url(/resource/images/base/loading_3.png);
    transform: scale(1) rotate(90deg);
  }
  30% {
    // background-image: url(/resource/images/base/loading_4.png);
    transform: scale(1) rotate(135deg);
  }
  40% {
    // background-image: url(/resource/images/base/loading_5.png);
    transform: scale(1) rotate(180deg);
  }
  50% {
    // background-image: url(/resource/images/base/loading_6.png);
    transform: scale(1) rotate(225deg);
  }
  60% {
    // background-image: url(/resource/images/base/loading_7.png);
    transform: scale(1) rotate(270deg);
  }
  70% {
    // background-image: url(/resource/images/base/loading_8.png);
    transform: scale(1) rotate(315deg);
  }
  80% {
    // background-image: url(/resource/images/base/loading_9.png);
    transform: scale(1) rotate(315deg);
  }
  90% {
    // background-image: url(/resource/images/base/loading_10.png);
    transform: scale(1) rotate(315deg);
  }
  100% {
    // background-image: url(/resource/images/base/loading_1.png);
    transform: scale(1) rotate(360deg);
  }
}

用法：
<div class="loading"><div class="loader"></div></div>

b. 纯css动画

/**
 * Lines
 */

.loader-inner {
    100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    display: -webkit-flex;
    z-index: 9999;
}
@-webkit-keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } 

}

@keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

.line-scale > div:nth-child(1) {
  -webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(2) {
  -webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(3) {
  -webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(4) {
  -webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(5) {
  -webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div {
  background-color: #ccc;
   4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block; }

用法：

<div class="loader-inner line-scale" style="margin: 100px 0;" v-show="isLoading">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

 3. border 半透明色

body{
  background-color: #ccc;
}
.border{
   300px;
  height: 300px;
  border: 10px solid hsla(0,0%,100%, .5);
  background-color: white;
  background-clip: padding-box;
}

<div class="border"></div>

background-clip: border-box|padding-box|content-box;

值	描述	测试
border-box	背景被裁剪到边框盒。	测试
padding-box	背景被裁剪到内边距框。	测试
content-box	背景被裁剪到内容框。

参考：http://www.w3school.com.cn/cssref/pr_background-clip.asp

4.简单的缝边效果 

.border{
    300px;
  height:  300px;
  /*border: 10px solid hsla(0,0%,100%, .5);*/
  background-color: #5f524f;
  border-radius: 5px;
  background-clip: padding-box;
  outline: 1px dashed #fff;
  outline-offset: -20px;
}