@charset "UTF-8";
/*  对“单纯”说不的效果二，  sass实现的华丽转身  */
/**
* 利用text-shadow实现3d文字效果
*
* $color     立体字的初始颜色
* $dx        立体字水平偏移位置，dx>0,向右偏，建议取值[-2,2]
* $dy        立体字垂直偏移位置，dy>0,向下偏，建议取值[-2,2]，dx和dy配合控制立体字的方向
* $steps     立体字的层叠数量
* $darken    立体字的颜色变暗数值，建议取值[0,1],需要结合层叠数量，避免过多的黑色出现
* @copyright 前端开发whqet，http://blog.csdn.net/whqet 
*/
.effect01 {
  color: #ffffff;
  text-shadow: 0px 0px 0 #b3b3b3,1px -1px 0 #b1b1b1,2px -2px 0 #b0b0b0,3px -3px 0 #aeaeae,4px -4px 12px rgba(0,0,0,0.3),4px -4px 1px rgba(0,0,0,0.5);;
}

/**黄色*/
.effect04 {
  color: #ffd300;
  text-shadow: 0px 0px 0 #665400,1px -1px 0 #635200,2px -2px 0 #605000,3px -3px 0 #5d4d00,4px -4px 0 #594a00,5px -5px 12px rgba(0,0,0,0.3),5px -5px 1px rgba(0,0,0,0.5);;
}

/**蓝色*/
.effect02 {
  color: #00d3ff;
  text-shadow: 0px 0px 0 #005466,1px -1px 0 #005263,2px -2px 0 #005060,3px -3px 0 #004d5d,4px -4px 0 #004a59,5px -5px 12px rgba(0,0,0,0.3),5px -5px 1px rgba(0,0,0,0.5);;
}

.effect041 {
  animation: textshadowg 2s linear 1;
}

.effect031 {
  animation: textshadow 2s linear 1;
}

@keyframes textshadowg {
  0% {
    color: #ccc;
    text-shadow: 0px 0px 0 gray,-1px -1px 0 #7e7e7e,-2px -2px 0 #7d7d7d,-3px -3px 0 #7b7b7b,-4px -4px 0 #797979,-5px -5px 0 #777777,-6px -6px 0 #757575,-7px -7px 0 #737373,-8px -8px 0 #717171,-9px -9px 0 #6e6e6e,-10px -10px 0 #6c6c6c,-11px -11px 0 dimgray,-12px -12px 0 #666666,-13px -13px 0 #636363,-14px -14px 12px rgba(0,0,0,0.3),-14px -14px 1px rgba(0,0,0,0.5);;
  }
}
@keyframes textshadow {
  0% {
    color: #ffffff;
    text-shadow: 0px 0px 0 #b3b3b3,-1px -1px 0 #b1b1b1,-2px -2px 0 #b0b0b0,-3px -3px 0 #aeaeae,-4px -4px 0 #acacac,-5px -5px 0 #aaaaaa,-6px -6px 0 #a8a8a8,-7px -7px 0 #a6a6a6,-8px -8px 0 #a4a4a4,-9px -9px 0 #a1a1a1,-10px -10px 0 #9f9f9f,-11px -11px 0 #9c9c9c,-12px -12px 0 #999999,-13px -13px 0 #969696,-14px -14px 12px rgba(0,0,0,0.3),-14px -14px 1px rgba(0,0,0,0.5);;
  }
}
/*  “多动”效果三， 加上动画 */
.effect03 {
  animation: animateShadow 2s linear infinite;
}

@keyframes animateShadow {
  0% {
    color: #00d3ff;
    text-shadow: 0px 0px 0 #005466,1px 1px 0 #005263,2px 2px 0 #005060,3px 3px 0 #004d5d,4px 4px 0 #004a59,5px 5px 0 #004755,6px 6px 0 #004351,7px 7px 0 #00404d,8px 8px 0 #003c48,9px 9px 0 #003844,10px 10px 0 #00343e,11px 11px 0 #002f39,12px 12px 0 #002b34,13px 13px 0 #00262e,14px 14px 12px rgba(0,0,0,0.3),14px 14px 1px rgba(0,0,0,0.5);;
  }
  25% {
    color: #00d3ff;
    text-shadow: 0px 0px 0 #005466,-1px -1px 0 #005263,-2px -2px 0 #005060,-3px -3px 0 #004d5d,-4px -4px 0 #004a59,-5px -5px 0 #004755,-6px -6px 0 #004351,-7px -7px 0 #00404d,-8px -8px 0 #003c48,-9px -9px 0 #003844,-10px -10px 0 #00343e,-11px -11px 0 #002f39,-12px -12px 0 #002b34,-13px -13px 0 #00262e,-14px -14px 12px rgba(0,0,0,0.3),-14px -14px 1px rgba(0,0,0,0.5);;
  }
  50% {
    color: #00d3ff;
    text-shadow: 0px 0px 0 #005466,1px 1px 0 #005263,2px 2px 0 #005060,3px 3px 0 #004d5d,4px 4px 0 #004a59,5px 5px 0 #004755,6px 6px 0 #004351,7px 7px 0 #00404d,8px 8px 0 #003c48,9px 9px 0 #003844,10px 10px 0 #00343e,11px 11px 0 #002f39,12px 12px 0 #002b34,13px 13px 0 #00262e,14px 14px 12px rgba(0,0,0,0.3),14px 14px 1px rgba(0,0,0,0.5);;
  }
  75% {
    color: #00d3ff;
    text-shadow: 0px 0px 0 #005466,-1.5px 1.5px 0 #005263,-3px 3px 0 #005060,-4.5px 4.5px 0 #004d5d,-6px 6px 0 #004a59,-7.5px 7.5px 0 #004755,-9px 9px 0 #004351,-10.5px 10.5px 0 #00404d,-12px 12px 0 #003c48,-13.5px 13.5px 0 #003844,-15px 15px 0 #00343e,-16.5px 16.5px 0 #002f39,-18px 18px 0 #002b34,-19.5px 19.5px 0 #00262e,-21px 21px 12px rgba(0,0,0,0.3),-21px 21px 1px rgba(0,0,0,0.5);;
  }
}

/*# sourceMappingURL=ouput.css.map */