純CSS實現滾動3D字幕_html/css

很多年以前，在Web上實現滾動文本的動畫效果一般是采用 marquee 標簽來實現，當然也有很多同學采用JavaScript來實現類似的效果。

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

譯文內容從這里開始。

銳角(Acute Angles)

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

 ONE LOVE ONE HEART ONE LOVE ONE HEART 

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

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

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

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

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

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

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

文本內容放在 span 標簽中，為了讓容器在規則的寬度范圍內能容納一個合理數量的文本，我們需要在 div 的元素上設置 overflow 的值為 hidden ，讓溢出的文本能被隱藏起來。

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

這時看到的效果是這樣的：

文本滾動(Forward Crawl)

span 元素根據他們自己身不同的位置設置不同的位移：右邊的文本向右移 30rem （即： div 元素可視區域寬度），左邊的文本移動的距離是 div 可視區域的兩倍(即，內部 div 的寬度)。為了讓效果更好一些，使用 text-shadow 給文本添加一點陰影效果。

#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 沒有設置 overflow:hidden; 和文本顏色，那么初始的效果將是這樣的：

兩個文本都要有動畫效果的。開始左邊的文本需要一個延遲移動的時間，而這個時間剛好是右邊文本到達轉角處的時間。

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

為了讓文本運動是一個勻速運動效果，這里采用了 linear 的 animation-timing-function 。此時你看到效果如下：

響應式效果

當瀏覽器的屏幕變窄時，上面的代碼做出來的效果就不太好：文本和角度變得越來越小，這樣使用字幕越來越難閱讀。所以當屏幕寬度小于 993px 時，將上面的3D效果換成2D效果，也就是只顯示一個 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%; }}

效果如下：

你可以嘗試將屏幕變窄，你將看到的效果類似下面的Gif動效：

有趣的事，使用 display:none; 隱藏元素，其動畫將完全停止，這個時候當元素重新顯示時會重新啟動。正因為這個原因，可以采用另外一種技術來隱藏元素。即，給第二個 div 設置 opacity 和 height 的值為 0 。這樣一來，如果窗口縮小或放大，動畫都會一直在播放。

總結

總的來說，效果還是讓我自己很滿意的。當然更期待使用CSS其他的技術做出更有意思的效果。就這篇文章的效果來說，有些地方還是可以改進的，尤其是那些重復的文本內容。為了解決這樣的困擾，使用JavaScript復制元素的和文本節點，可以很輕松的做到。比如文章開頭的示例，我們里面就有一個輸入文本的改變顯示內容的效果。

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

大漠

常用昵稱“大漠”，W3CPlus創始人，目前就職于手淘。對HTML5、CSS3和Sass等前端腳本語言有非常深入的認識和豐富的實踐經驗，尤其專注對CSS3的研究，是國內最早研究和使用CSS3技術的一批人。CSS3、Sass和Drupal中國布道者。2014年出版《 圖解CSS3：核心技術與案例實戰 》。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com