<h4> (写在文前的只言片语、意书情殇)长歌破晓穿云过,响彻碧霄振九天.)------Jason Zhang
web开发已现世多年,技术成熟且学习平台广泛,笔者针对其中细节从本质上进行解释.力求透彻.</h4>

好了,是时候表演真正的技术了!

废话不都说,先上效果

3D立体式字幕.gif

第一步首先创建一个大div里面分别两个div里面包含span.

---

<div id="marquee">
    <div><span>Jason Zhang</span></div>
    <div aria-hidden="true"><span>Jason Zhang</span></div>
</div>

---

这样结构就已经写完了,是不是so easy !
接下来css样式表,自定义一个动画@keykeyframes

<pre>
* {
margin: 0;
padding: 0;
list-style: none;
}

marquee {

margin: 100px auto;
width: 400px;
-webkit-perspective: 500px;
perspective: 500px;
font-size: 0;
}

marquee div {

display: inline-block;
height: 120px;
width: 200px;
position: relative;
}

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;
}

marquee div {

font-size: 40px;
overflow: hidden;
}

marquee div span {

position: absolute;
width: 400%;
line-height: 3;
}
@-webkit-keyframes leftcrawl {
to {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
}
}
@keyframes leftcrawl {
to {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
}
}
@-webkit-keyframes rightcrawl {
to {
-webkit-transform: translateX(-1300px);
transform: translateX(-1300px);
}
}
@keyframes rightcrawl {
to {
-webkit-transform: translateX(-1300px);
transform: translateX(-1300px);
}
}

marquee div:first-of-type span {

-webkit-transform: translateX(400px);
transform: translateX(400px);
-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(200px);
transform: translateX(200px);
-webkit-animation: rightcrawl 14s linear infinite;
animation: rightcrawl 14s linear infinite;
}
</pre>
<h2>注意需要兼容一下浏览器!!!</h2>
笔没墨了!
欲知详情,下节再讲!