样式整理

.errorCon {
  position: absolute;
  left: 0;
   100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

div{
	 90%;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
}

箭头css

.barchart strong:after {
  content: "";
  display: block;
   15px;
  height: 11px;
  background: url(http://tgideas.qq.com/act/a20150428report/img/sp.png) no-repeat;
  background-size: 151px;
  background-position: -4px -86px;
  position: absolute;
  left: 91px;
  bottom: -11px;
  opacity: 0.5;
}

　　transition——过度 

　转换(transition)、变形(transform)、动画(animation)

小屏样式适配

@media screen and (max-height: 504px)
.bg04 {
  -webkit-transform: scale(0.8);
  -webkit-transform-origin: 50% 30%;
}

　　

.sec_on_4 .left{-webkit-animation: leftinfo 0.6s ease-in-out;opacity: 1}

@-webkit-keyframes leftinfo {0%{-webkit-transform: translateY(-30px);opacity: 0.5;}100%{-webkit-transform: translateY(0);opacity: 1;}}

移动端背景

eg：

background: url(http://tgideas.qq.com/act/a20150428report/img/sp.png) no-repeat;

background-size: 151px;

background-size是原背景图的一半

@-webkit-keyframes heart {50%{-webkit-transform: scale(0.9);opacity: 0.9;}}