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。