标签：
不得不说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。
标签：
原文地址：http://www.cnblogs.com/Imever/p/4598342.html
