@charset "utf-8";
img {
	border:0;
}
ul, li, p{
	padding:0;
	margin:0;
}
LI {
	list-style:none;
}
.icon {
	width:330px;
	height:110px;
}
.icondown {
	overflow: hidden;
}
.icondown li {
	float: left;
	width:70px;
	height:110px;
	margin-left:20px;
	margin-right:20px;
	text-align: center;
}
.icondown li img {
	display: inline-block;
}
.icondown li p {
	height:40px;
	line-height:40px;
	overflow: hidden;
}
.icondown li p a {
    font-family:"微软雅黑";
	font-size: 16px;
	color:#333;
	font-weight:bold;
	text-decoration:none;
}
.icondown li:hover img {
-webkit-animation:tada 1s .2s ease both;
-moz-animation:tada 1s .2s ease both
}
/*动画效果*/
@-webkit-keyframes tada {
0% {
-webkit-transform:scale(1)
}
10%, 20% {
-webkit-transform:scale(0.7) rotate(-3deg)
}
30%, 50%, 70%, 90% {
-webkit-transform:scale(1.2) rotate(3deg)
}
40%, 60%, 80% {
-webkit-transform:scale(1.2) rotate(-3deg)
}
100% {
-webkit-transform:scale(1) rotate(0)
}
}
@-moz-keyframes tada {
0% {
-moz-transform:scale(1)
}
10%, 20% {
-moz-transform:scale(0.7) rotate(-3deg)
}
30%, 50%, 70%, 90% {
-moz-transform:scale(1.2) rotate(3deg)
}
40%, 60%, 80% {
-moz-transform:scale(1.2) rotate(-3deg)
}
100% {
-moz-transform:scale(1) rotate(0)
}
}


/*定义一个名字为lefteaseinAnimate动画，实现从页面的左边淡入页面效果*/
@keyframes lefteaseinAnimate{
    0%{ transform: translateX(-500px); opacity: 0;}   /*在0%时设置文字在想X轴-500px位移处（左边），透明度为0，也就是看不见文字*/
    100%{ transform: translateX(0px); opacity: 1;}         /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}
@-webkit-keyframes lefteaseinAnimate{
    0%{ -webkit-transform: translateX(-500px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}   
}
@-o-keyframes lefteaseinAnimate{
    0%{ -webkit-transform: translateX(-500px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}   
}
@-ms-keyframes lefteaseinAnimate{
    0%{ -webkit-transform: translateX(-500px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}   
}
@-moz-keyframes lefteaseinAnimate{
    0%{ -webkit-transform: translateX(-500px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}   
}
.ht1{
    animation: lefteaseinAnimate 3s ease 1;    /*调用已定义好的动画lefteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/
    -webkit-animation: lefteaseinAnimate 3s ease 1; /*动画开始时间3s*/
    -ms-animation: lefteaseinAnimate 3s ease 1;
    -o-animation: lefteaseinAnimate 3s ease 1;
    -moz-animation: lefteaseinAnimate 3s ease 1;
     
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards; 
      -o-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;  
      -moz-animation-fill-mode: forwards;
}
.ht2{
    animation: lefteaseinAnimate 3s ease 1;    /*调用已定义好的动画lefteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/
    -webkit-animation: lefteaseinAnimate 5s ease 1; /*动画开始时间5s*/
    -ms-animation: lefteaseinAnimate 3s ease 1;
    -o-animation: lefteaseinAnimate 3s ease 1;
    -moz-animation: lefteaseinAnimate 3s ease 1;
     
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards; 
      -o-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;  
      -moz-animation-fill-mode: forwards;
}
.ht3{
    animation: lefteaseinAnimate 3s ease 1;    /*调用已定义好的动画lefteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/
    -webkit-animation: lefteaseinAnimate 6s ease 1; /*动画开始时间6s*/
    -ms-animation: lefteaseinAnimate 3s ease 1;
    -o-animation: lefteaseinAnimate 3s ease 1;
    -moz-animation: lefteaseinAnimate 3s ease 1;
     
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards; 
      -o-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;  
      -moz-animation-fill-mode: forwards;
}