CSS几种特效整理

css用伪类before和after制作三角形箭头网上有一堆教程代码，挺简单的。
箭头向上：

#content:before{
  position:absolute;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-bottom:9px solid #ccc;
  content:" ";
  display:block;
  width:0;
  height:0
}

位置自己调整一下即可，向下、左、右 以此类推，对于content仅有背景色而没有边框的情况下是毫无违和感的。

CSS实现div的淡入效果

@keyframes fade-in {
  0% {opacity: 0;}/*初始状态 透明度为0*/
  40% {opacity: 0;}/*过渡状态 透明度为0*/
  100% {opacity: 1;}/*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {/*针对webkit内核*/
  0% {opacity: 0;}
  40% {opacity: 0;}
  100% {opacity: 1;}
}

#应用
#wrapper {
  animation: fade-in;/*动画名称*/
  animation-duration: 1.5s;/*动画持续时间*/
  -webkit-animation:fade-in 1.5s;/*针对webkit内核*/
}

渐变背景色

  FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#0f5ed7,endColorStr=#eee); /*IE 6 7 8*/
  background: -ms-linear-gradient(left, #0f5ed7,#eee); /* IE 10 */
  background:-moz-linear-gradient(left, #0f5ed7,#eee);/*火狐*/
  background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#0f5ed7), to(#eee));/*谷歌*/
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0f5ed7), to(#eee));/* Safari 4-5, Chrome 1-9*/
  background: -webkit-linear-gradient(left, #0f5ed7, #eee); /*Safari5.1 Chrome 10+*/
  background: -o-linear-gradient(left, #0f5ed7, #eee);/*Opera 11.10+*/