CSS3 achieve focus Mobile text effects

I have to say that CSS3 is very powerful, at least when I see this effect is so sigh!

Here's how to follow the steps to uncover how this effect is implemented.

step. 1

Analysis of the effect, it is generally known that this is achieved by the upper and lower div coverage, and the upper layer is the clear level we see, tentatively a layer, fuzzy positioning B layer.

A layer visible area fixed width and move left and right, b layer just give a blur effect, so you can make this special effect.

The A-layer here is a part of the need to note that he essentially consists of two parts: 1, a transparent box that moves from left to right. 2. Clear text that moves from right to left.

Transparent box in the moving colleague, the text inside is also moving in the opposite direction relative to it.

SETP. 2

First, build a, B, two-layer HTML structure:

<Divclass= "Focus">        <Divclass= "Focus--mask">            <Divclass= "Focus--mask-inner">Imever</Div>        </Div>    </Div>

The pseudo class of the focus class before to implement the B-layer.

focus--mask Transparent box moved from left to right .

Focus--mask-inner text that moves from right to left relative to the transparent box.

step. 3

Beautify the style.

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

Results:

Now, a layer has appeared and the B layer is made below. Notice here that the content in the before and the actual text need to be the same, of course, you can also set a different, then there is Magic ~

{    content: ' imever ';     -webkit-filter: Blur (5px);}

Results:

The focus--mask layer of the style control, so that it coincides with the before content, and control the width, where the background is the body background, and focus--mask background, two background color settings are the same:

{    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

Finally, let the layer a move up. Mask-move is responsible for the transparent box with left-to-right motion, Mask-inner-move is responsible for the right-to-left movement of the text (the distance between the left to move according to the content control):

{    0% {        -webkit-transform: translateX (0);    } {-webkit-transform: TranslateX (220px);        }          {    0% {        -webkit-transform: translateX (0);    } {-webkit-transform: TranslateX ( -220px);        }         }

Combine the above animations with animation to let Focus--mask and Focus--mask-inner move together

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

At this point, the above effects can be achieved.

Note: test environment chrome.

CSS3 achieve focus Mobile text effects