元素，分别用于制作跑马灯墙面的左右两个部分。aria-hidden="true"属性用于避免屏幕阅读器抓取时产生重复。

CSS样式

跑马灯容器元素#marquee上被设置了3D透视效果，透视度为500。它里面的div元素显示为内联块级元素，并设置了相对宽度和高度。定位方式为相对定位。

#marquee {

margin-top: 3rem;

-webkit-perspective: 500px;

perspective: 500px;

font-size: 0;

font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;

}

#marquee div {

display: inline-block;

height: 12rem;

width: 30rem;

position: relative;

}

#marquee div {

font-size: 8rem;

overflow: hidden;

}

#marquee div span {

position: absolute;

width: 400%;

line-height: 1.4;

}

然后通过div:first-of-type和div:last-of-type分别为左右两个墙面设置背景，转换原点，文字颜色和旋转角度。

#marquee div:first-of-type {

background: #e5233e;

-webkit-transform-origin: top right;

transform-origin: top right;

-webkit-transform: rotateY(-40deg);

transform: rotateY(-40deg);

color: #fff;

}

#marquee div:last-of-type {

background: #b31e31;

-webkit-transform-origin: top left;

transform-origin: top left;

-webkit-transform: rotateY(45deg);

transform: rotateY(45deg);

color: #f8c9d9;

}

前后两个前面中的span元素用于制作跑马灯动画效果，它们分别执行leftcrawl动画和rightcrawl动画，这两个动画都在14秒时间内通过translateX()函数使元素在X轴方向上运动。

@-webkit-keyframes leftcrawl {

to {

-webkit-transform: translateX(-100rem);

transform: translateX(-100rem);

}

}

@keyframes leftcrawl {

to {

-webkit-transform: translateX(-100rem);

transform: translateX(-100rem);

}

}

@-webkit-keyframes rightcrawl {

to {

-webkit-transform: translateX(-130rem);

transform: translateX(-130rem);

}

}

@keyframes rightcrawl {

to {

-webkit-transform: translateX(-130rem);

transform: translateX(-130rem);

}

}

#marquee div:first-of-type span {

-webkit-transform: translateX(60rem);

transform: translateX(60rem);

-webkit-animation: leftcrawl 14s linear infinite;

animation: leftcrawl 14s linear infinite;

text-shadow: 4px 0px 4px rgba(0, 0, 0, 0.3);

}

#marquee div:last-of-type span {

-webkit-transform: translateX(30rem);

transform: translateX(30rem);

-webkit-animation: rightcrawl 14s linear infinite;

animation: rightcrawl 14s linear infinite;

}

最后，在设备屏幕的宽度小于993像素的时候，跑马灯会取消3D效果，显示为平面跑马灯效果。

@media all and (max-width: 993px) {

#marquee {

-webkit-perspective: none;

perspective: none;

}

#marquee div:last-of-type {

opacity: 0;

height: 0;

}

#marquee div:first-of-type {

width: 80%;

}

}