﻿/* 定义一个走马灯动画 */

@-webkit-keyframes marquee {
    0% { left: 0; }
    100% { left: -200%; }
}
@-moz-keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
}
@-ms-keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
}
@-o-keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
}
@keyframes marquee {
  0%{left:0}
  100%{left: -100%}
}

.marquee {
  height: 6%;

  overflow: hidden;
  position: relative;
}

    .marquee div {
        display: block;
        width: 200%;
        position: relative;
        overflow: hidden;
        -webkit-animation: marquee 10s linear infinite;
        -moz-animation: marquee 10s linear infinite;
        -ms-animation: marquee 10s linear infinite;
        -o-animation: marquee 10s linear infinite;
        animation: marquee 10s linear infinite;
         text-align:center;
        /*top:30%;*/
        padding-top:1%;
        white-space:nowrap;
    }
    .marquee div:hover {
        -webkit-animation-play-state: paused;
        -moz-animation-play-state: paused;
        -o-animation-play-state: paused;
         animation-play-state: paused;
    }