很多年以前，在Web上實(shí)現(xiàn)滾動(dòng)文本的動(dòng)畫(huà)效果一般是采用 marquee 標(biāo)簽來(lái)實(shí)現(xiàn)，當(dāng)然也有很多同學(xué)采用JavaScript來(lái)實(shí)現(xiàn)類(lèi)似的效果。

前幾天在CodePen看到有位大神使用純CSS制作了一個(gè)3D的滾動(dòng)文本效果，仔細(xì)看了一會(huì)，沒(méi)想到 thenewcode.com/ 就有介紹這個(gè)案例的文章，今天將篇文章翻譯出來(lái)和大家一起分享。在繼續(xù)閱讀下面的內(nèi)容之前，先來(lái)看一下需要完成的動(dòng)畫(huà)效果：

譯文內(nèi)容從這里開(kāi)始。

銳角(Acute Angles)

使用到的HTML很簡(jiǎn)單，在一個(gè) div 的容器里，放置了兩個(gè) div 元素，而且這兩個(gè)元素里放置的內(nèi)容是一樣的，如下所示：

 ONE LOVE ONE HEART ONE LOVE ONE HEART 

第二個(gè)元素是第一個(gè)元素的副本，而且在第二個(gè) div 元素上設(shè)置一個(gè) aria-hidden="true" 隱藏元素，所以在效果中你只能看到一個(gè)文本。

在 div#marquee 內(nèi)部的 div 元素使用了3D旋轉(zhuǎn)為其設(shè)置一個(gè)合適的角度，并且在其父元素中設(shè)置 perspective 的值為 0 。同時(shí)將父元素的 font-size 也設(shè)置為 0 ，主要是為了保證內(nèi)部的 inline-block 元素不會(huì)產(chǎn)生任何的間距。

#marquee { perspective: 500px; font-size: 0;}#marquee div { display: inline-block; height: 12rem; width: 30rem; position: relative;}

如果您是第一次接觸3D相關(guān)的知識(shí)，你可以點(diǎn)擊這里了解相關(guān)方面的知識(shí)點(diǎn)。另外有關(guān)于如何清除 inline-block 元素之間的間距，可以閱讀早先分享的一篇文章《 如何解決inline-block元素的空白間距 》。

同時(shí)使用 transform-origin 給內(nèi)部元素設(shè)置稍微不同的角度，讓元素變得彎曲，并且通過(guò)不同的背景顏色和文本顏色，模擬出一個(gè)光照的效果。

#marquee div:first-of-type { background: #e5233e; transform-origin: top right; transform: rotateY(-40deg); color: #fff;}#marquee div:last-of-type { background: #b31e31; transform-origin: top left; transform: rotateY(45deg); color: #f8c9d9;}

加上一些基本樣式的美化，你將看到下面這樣的一個(gè)效果：

文本內(nèi)容放在 span 標(biāo)簽中，為了讓容器在規(guī)則的寬度范圍內(nèi)能容納一個(gè)合理數(shù)量的文本，我們需要在 div 的元素上設(shè)置 overflow 的值為 hidden ，讓溢出的文本能被隱藏起來(lái)。

#marquee div { font-size: 8rem; overflow: hidden;}#marquee div span { position: absolute; width: 400%; line-height: 1.4;}

這時(shí)看到的效果是這樣的：

文本滾動(dòng)(Forward Crawl)

span 元素根據(jù)他們自己身不同的位置設(shè)置不同的位移：右邊的文本向右移 30rem （即： div 元素可視區(qū)域?qū)挾龋筮叺奈谋疽苿?dòng)的距離是 div 可視區(qū)域的兩倍(即，內(nèi)部 div 的寬度)。為了讓效果更好一些，使用 text-shadow 給文本添加一點(diǎn)陰影效果。

#marquee div:first-of-type span { transform: translateX(60rem); animation: leftcrawl 14s linear infinite; text-shadow: 4px 0px 4px rgba(0,0,0,0.3);}#marquee div:last-of-type span { transform: translateX(30rem); animation: rightcrawl 14s linear infinite;}

如果父元素 div 沒(méi)有設(shè)置 overflow:hidden; 和文本顏色，那么初始的效果將是這樣的：

兩個(gè)文本都要有動(dòng)畫(huà)效果的。開(kāi)始左邊的文本需要一個(gè)延遲移動(dòng)的時(shí)間，而這個(gè)時(shí)間剛好是右邊文本到達(dá)轉(zhuǎn)角處的時(shí)間。

@keyframes leftcrawl { to { transform: translateX(-100rem); }}@keyframes rightcrawl { to { transform: translateX(-130rem); }}

為了讓文本運(yùn)動(dòng)是一個(gè)勻速運(yùn)動(dòng)效果，這里采用了 linear 的 animation-timing-function 。此時(shí)你看到效果如下：

響應(yīng)式效果

當(dāng)瀏覽器的屏幕變窄時(shí)，上面的代碼做出來(lái)的效果就不太好：文本和角度變得越來(lái)越小，這樣使用字幕越來(lái)越難閱讀。所以當(dāng)屏幕寬度小于 993px 時(shí)，將上面的3D效果換成2D效果，也就是只顯示一個(gè) div 元素：

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

效果如下：

你可以嘗試將屏幕變窄，你將看到的效果類(lèi)似下面的Gif動(dòng)效：

有趣的事，使用 display:none; 隱藏元素，其動(dòng)畫(huà)將完全停止，這個(gè)時(shí)候當(dāng)元素重新顯示時(shí)會(huì)重新啟動(dòng)。正因?yàn)檫@個(gè)原因，可以采用另外一種技術(shù)來(lái)隱藏元素。即，給第二個(gè) div 設(shè)置 opacity 和 height 的值為 0 。這樣一來(lái)，如果窗口縮小或放大，動(dòng)畫(huà)都會(huì)一直在播放。

總結(jié)

總的來(lái)說(shuō)，效果還是讓我自己很滿意的。當(dāng)然更期待使用CSS其他的技術(shù)做出更有意思的效果。就這篇文章的效果來(lái)說(shuō)，有些地方還是可以改進(jìn)的，尤其是那些重復(fù)的文本內(nèi)容。為了解決這樣的困擾，使用JavaScript復(fù)制元素的和文本節(jié)點(diǎn)，可以很輕松的做到。比如文章開(kāi)頭的示例，我們里面就有一個(gè)輸入文本的改變顯示內(nèi)容的效果。

本文根據(jù) @dudleystorey 的《 Wrapping Animated 3D Marquee Text with Pure CSS 》所譯，整個(gè)譯文帶有我們自己的理解與思想，如果譯得不好或有不對(duì)之處還請(qǐng)同行朋友指點(diǎn)。如需轉(zhuǎn)載此譯文，需注明英文出處: http://thenewcode.com/1096/Wrapping-Animated-3D-Marquee-Text-with-Pure-CSS 。

大漠

常用昵稱(chēng)“大漠”，W3CPlus創(chuàng)始人，目前就職于手淘。對(duì)HTML5、CSS3和Sass等前端腳本語(yǔ)言有非常深入的認(rèn)識(shí)和豐富的實(shí)踐經(jīng)驗(yàn)，尤其專(zhuān)注對(duì)CSS3的研究，是國(guó)內(nèi)最早研究和使用CSS3技術(shù)的一批人。CSS3、Sass和Drupal中國(guó)布道者。2014年出版《 圖解CSS3：核心技術(shù)與案例實(shí)戰(zhàn) 》。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com