css3實現焦點移動文本特效

標籤：

不得不說css3很強大，至少在我看到這種效果的時候是這麼感歎的！

下面就來按步驟揭露這種效果的實現方法。

step.1

分析效果，大致可以知道這是由上下兩層div覆蓋實現的，並且上層是我們看到的清楚的那一層，暫訂為A層，模糊的定位B層。

A層可見地區固定寬度並且左右移動，B層僅僅給出模糊效果，這樣就可以做成這種特效。

這裡的A層是需要注意到部分，他本質由兩部分組成：1，從左向右移動的透明框。2，從右向左移動的清楚文字。

透明框在移動的同事，裡面的文字也在相對於它進行相反方向的移動。

 

 

setp.2

首先，搭建A，B兩層html結構：

　　<div class="focus">        <div class="focus--mask">            <div class="focus--mask-inner">imever</div>        </div>    </div>

focus類的偽類before來實現B層.

focus--mask由左向右移動的透明框.

focus--mask-inner相對於透明框由右向左運動的文字.

step.3

美化樣式。

body {    background: #476889;}.focus {    font-size: 80px;    text-transform: uppercase;    color: #fff;    letter-spacing: 10px;    line-height: 80px;    position: relative;}

結果：

現在，已經出現A層，下面製作B層。這裡注意before中內容與實際文字需相同，當然，你也可以設定不同，那就出現魔法了~

.focus:before {    content: ‘imever‘;    -webkit-filter: blur(5px);}

結果：

對focus--mask層進行樣式控制，使其與before內容重合，並且控制寬度，這裡的背景分別是body的背景，和focus--mask的背景，兩個背景色設定相同：

 

.focus--mask {    overflow: hidden;    position: absolute;    width: 100px;    height: calc(100% + 10px);    top: 0px;    left: -5px;    background: #476889;    border-top: 2px solid;    border-bottom: 2px solid;}

 

step.4

 

最後，讓A層動起來。mask-move負責透明框有左向右運動，mask-inner-move負責由右向左運動的文字（左右移動的距離根據內容控制啦~）：

@-webkit-keyframes mask-move {    0% {        -webkit-transform: translateX(0);    }    100% {        -webkit-transform: translateX(220px);    }}@-webkit-keyframes mask-inner-move {    0% {        -webkit-transform: translateX(0);    }    100% {        -webkit-transform: translateX(-220px);    }}

將以上動畫結合animation分別讓focus--mask和focus--mask-inner動起來

.focus--mask {    overflow: hidden;    position: absolute;    width: 100px;    height: calc(100% + 10px);    top: 0px;    left: -5px;    background: #476889;    border-top: 2px solid;    border-bottom: 2px solid;    -webkit-animation: mask-move 2s linear infinite alternate;}.focus--mask-inner {    -webkit-animation: mask-inner-move 2s linear infinite alternate;}

至此，以上效果即可實現。

注意：測試環境Chrome。

 

css3實現焦點移動文本特效