史上最詳細 純CSS打造3D文本滾動

昨天看見了一篇文章關於用純CSS實現文本滾動，在這里跟大家分享一下。

首先把效果圖貼給大家

根據效果圖我們很容易發現肯定是要用到3D轉換的，如果對這個還不是很了解的可以先看看下面的文章

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

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

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

HTML代碼：

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

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

CSS代碼：

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

效果圖：

 

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

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

解決上述問題后，就要產生折角了，主要是通過transform:rotateY 來實現。

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

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

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

看效果吧

怎么樣，基本雛形已經有了，那么接下來就是要讓文字滾動起來，這時我們就需要用到transform:translateX 這個位移特性了。

現在我們把代碼變成下面這個樣子

#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);/*這里值要設置成2倍div的寬度（實際上是div的寬度+下面的translateX的值）*/

　　　　　　　} 
　　　　　　　#container div:last-of-type span{ transform: translateX(30rem);/*這里的30rem要設置成剛好和div的寬度相同*/ }

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

那么接下來就要運動動畫來改變translateX的值使文字動起來了

　　　　　　 #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);/*為了效果更逼真我們在向光的div加上文字陰影*/
            }
                
            #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);}
            }

這里我們用到了關鍵幀，實現動畫特效，這里需要注意的是  |（-130）-30|  和|（-100）-60|這兩個的絕對值必須相等，這樣你才可能，保證速度一直（簡單點就是在所用的時間都相同的話，要想速度相同並排跑，那么跑的距離也應該是相同的）。在這里究竟要位移多少（如代碼中的-130rem和-100rem）這個取決於你的文字長度，文字越長，這個位移的距離肯定要越長。

怎么樣還是比較逼真吧！我們在這里跟子div都加了一個overflow:hidden，來隱藏已經溢出的文字，不然會見到下圖

當然這里還有一個問題，那就是如果文字過長，那么在div里面就會換行得到的就是下面的效果

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

最后一步就是要實現響應式，因為當屏幕較小時，則會出現下面的效果

所以我們加上如下代碼

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

當屏幕較小是，會顯示如下效果

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

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