昨天看見了一篇文章關(guān)于用純CSS實(shí)現(xiàn)文本滾動(dòng)，在這里跟大家分享一下。

首先把效果圖貼給大家

根據(jù)效果圖我們很容易發(fā)現(xiàn)肯定是要用到3D轉(zhuǎn)換的，如果對(duì)這個(gè)還不是很了解的可以先看看下面的文章

http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/comment-page-1/

http://www.w3cplus.com/blog/tags/95.html

那么首先我們就要把這個(gè)折角的效果做出來

HTML代碼：

　　　　<div id="container"><div><span>用來裝文字</span></div><div><span>用來裝文字</span></div></div>

既然是3D效果，那么就要把創(chuàng)建一個(gè)3D環(huán)境，我們跟id=container的div加一個(gè)perspective:500px。然后跟底下的子div加上基本樣式

CSS代碼：

　　　　　　 #container{perspective: 500px;/*font-size: 0;*/}#container div{font-size: 1rem;width: 30rem;height: 10rem;background: #c40000;display: inline-block;}

效果圖：

?

?我們可以看到中間產(chǎn)生了空隙，為了解決這個(gè)問題我們可以將id=container的div設(shè)置font-size:0;更多可以見下面這篇文章

http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements

解決上述問題后，就要產(chǎn)生折角了，主要是通過transform:rotateY 來實(shí)現(xiàn)。

　　　　　　#container div:first-of-type{transform: rotateY(-40deg);transform-origin: top right;background: #E5233E;}#container div:last-of-type{transform: rotateY(40deg);transform-origin: top left;background: #B31E31;}

為了實(shí)現(xiàn)更為逼真的效果，凸顯出明暗，我們將兩個(gè)子div的背景顏色設(shè)置成不同的值（?#E5233E和#B31E31），這樣就會(huì)有背光和向光的區(qū)別，同時(shí)在#container div中加入如下基本設(shè)置代碼

color: #fff; line-height: 10rem;

看效果吧

怎么樣，基本雛形已經(jīng)有了，那么接下來就是要讓文字滾動(dòng)起來，這時(shí)我們就需要用到transform:translateX 這個(gè)位移特性了。

現(xiàn)在我們把代碼變成下面這個(gè)樣子

#container div{font-size: 6rem;width: 30rem;height: 10rem;display: inline-block;color: #fff;line-height: 10rem;position: relative;}#container div:first-of-type{transform: rotateY(-40deg);transform-origin: top right;background: #E5233E;}#container div:last-of-type{transform: rotateY(60deg);transform-origin: top left;background: #B31E31;}#container div span{position: absolute;}#container div:first-of-type span{transform: translateX(60rem);/*這里值要設(shè)置成2倍div的寬度（實(shí)際上是div的寬度+下面的translateX的值）*/ 　　　　　　　}
　　　　　　　#container div:last-of-type span{ transform: translateX(30rem);/*這里的30rem要設(shè)置成剛好和div的寬度相同*/ }

在這里主要說一下這兩個(gè)translateX的怎么設(shè)置，首先看第二個(gè)div也就是右邊這個(gè)，如果要文字從最右邊移動(dòng)過來，首先我們就需要把文字全部移到div的后面去，也就是上圖藍(lán)色部分；那么左邊那個(gè)div的translateX的值就必須是上圖中X+Y的值，如果說的不是很清楚，可以自己下來實(shí)驗(yàn)自行體會(huì)。哎，這個(gè)圖畫的貌似有點(diǎn)丑，將就一下啰。

那么接下來就要運(yùn)動(dòng)動(dòng)畫來改變translateX的值使文字動(dòng)起來了

　　　　　　 #container div:first-of-type span{transform: translateX(60rem);animation: left_div 14s linear infinite;text-shadow: 20px 0px 4px rgba(0,0,0,0.3);/*為了效果更逼真我們?cè)谙蚬獾膁iv加上文字陰影*/}#container div:last-of-type span{transform: translateX(30rem);animation: right_div 14s linear infinite ;}@keyframes right_div{to{transform: translateX(-130rem);}}@keyframes left_div{to{transform: translateX(-100rem);}}

這里我們用到了關(guān)鍵幀，實(shí)現(xiàn)動(dòng)畫特效，這里需要注意的是 ?|（-130）-30| ?和|（-100）-60|這兩個(gè)的絕對(duì)值必須相等，這樣你才可能，保證速度一直（簡(jiǎn)單點(diǎn)就是在所用的時(shí)間都相同的話，要想速度相同并排跑，那么跑的距離也應(yīng)該是相同的）。在這里究竟要位移多少（如代碼中的-130rem和-100rem）這個(gè)取決于你的文字長(zhǎng)度，文字越長(zhǎng)，這個(gè)位移的距離肯定要越長(zhǎng)。

怎么樣還是比較逼真吧！我們?cè)谶@里跟子div都加了一個(gè)overflow:hidden，來隱藏已經(jīng)溢出的文字，不然會(huì)見到下圖

當(dāng)然這里還有一個(gè)問題，那就是如果文字過長(zhǎng)，那么在div里面就會(huì)換行得到的就是下面的效果

這種顯然不是我們想要的，所以要在#container div中加入 ?white-space：nowrap;這樣就正常了。

最后一步就是要實(shí)現(xiàn)響應(yīng)式，因?yàn)楫?dāng)屏幕較小時(shí)，則會(huì)出現(xiàn)下面的效果

所以我們加上如下代碼

　　　　　　@media all and (max-width: 993px) {#container {perspective: none;}#container div:last-of-type { opacity: 0; height: 0;}#container div:first-of-type {width: 80%;}}

當(dāng)屏幕較小是，會(huì)顯示如下效果

好了，大功告成，各位拿去盡情裝逼吧！最后附上完整代碼

HTML

　　　　<div id="container"><div><span>DJL簫氏，三月七日，白樺林里，熱愛前端，性別男，愛好女</span></div><div><span>DJL簫氏，三月七日，白樺林里，熱愛前端，性別男，愛好女</span></div></div>

?

CSS

　　　　　　 #container{perspective: 500px;font-size: 0;}#container div{font-size: 6rem;width: 30rem;height: 10rem;display: inline-block;color: #fff;line-height: 10rem;position: relative;overflow: hidden;white-space: nowrap;}#container div:first-of-type{transform: rotateY(-40deg);transform-origin: top right;background: #E5233E;}#container div:last-of-type{transform: rotateY(60deg);transform-origin: top left;background: #B31E31;}#container div span{position: absolute;width: 400%; }#container div:first-of-type span{transform: translateX(60rem);animation: left_div 14s linear infinite;text-shadow: 20px 0px 4px rgba(0,0,0,0.3);}#container div:last-of-type span{transform: translateX(30rem);animation: right_div 14s linear infinite ;}@keyframes right_div{to{transform: translateX(-130rem);}}@keyframes left_div{to{transform: translateX(-100rem);}}@media all and (max-width: 993px) {#container {perspective: none;}#container div:last-of-type { opacity: 0; height: 0;}#container div:first-of-type {width: 80%;}}

參考鏈接：

http://www.w3cplus.com/animation/wrapping-animated-3D-marquee-text-with-pure-CSS.html

http://thenewcode.com/1096/Wrapping-Animated-3D-Marquee-Text-with-Pure-CSS

?

轉(zhuǎn)載于:https://www.cnblogs.com/djlxs/p/5598120.html

總結(jié)

以上是生活随笔為你收集整理的史上最详细 纯CSS打造3D文本滚动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。