一个神奇的鼠标移入效果 用css完成的

css动画的动画制作没有什么特别高深的地方，引入少量的css代码就能实现丰富多彩的页面效果是作为一个web前端开发者所推崇的，但我想要强调的是掌握并深入的理解css的基础，以及灵活的运用是做出一个画面美观、代码简洁、性能高效的css动画的必备技能。今天，我也就不再多做赘述，我就来说一说我在做css动画的心得体会。

我把css动画的制作分为3个阶段：学习（初步）阶段、模仿阶段、自我开发阶段。

学习（初步）阶段

首先，现在web前端框架，理念不断地推陈出新的今天，作为一个前端开发人员学习应该成为我们的常态，它是我们拿取高薪的基础，同时也是我们不被淘汰的基石之一；
其次，就是要加深理解、加强练习。二者互为依托，理解需要通过练习来验证，理解使练习变得简单；
最后，就是把学习、理解和练习的成果展现出来。例如，在我们所做的项目中来展现自己的成果，这样可以转变为更为直观的东西，与此同时也能提高自己的关注度（这不多说，你也知道）。

模仿阶段

作为一个程序员，特别是一个前端的程序员，你会像spider一样不停的在网页之间进行跳转，找到自己喜欢的页面，获取自己需要的代码和其他资源。当我们找到我们所要的资源后就是使用。
每当我们在网页中发现一些漂亮的动画，我们将想着这个动画效果我们来现的话，我们会怎么做？我们首先会查看原网页中的html结构，并尝试着把它写出来，然后根据自己的理解写出来css代码，写完后我们会查看效果，如果实现了元网页中的效果，我们也会尝试着优化代码，看一看能不能简写代码；也会尝试看看能不能添加一些东西是动画更酷；同时也会尝试一下能不能在此动画效果的基础上创作出更好看的动画效果。

只是进行文字的描述感觉有些空洞，那就举一系列与border有关的css动画来说明一下。

border-anim-1

这是一个简单的实现border的动画，但这个动画并不是真正的实现元素的border的动画，它是通过伪元素::after, ::before中的一个或两个的运动来实现的。

css代码如下：

.l-border-line::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #ff0000;
content: ‘‘;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: ease-in-out 0.2s;
transition: ease-in-out 0.2s;
}
.l-border .l-border-line::after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

border-anim-2

这个动画效果有两个动画叠加组成，其中一个是当鼠标移入border的颜色的变化，这里是一个transition过渡动画；另一个是当鼠标移入动画沿着border的环绕颜色变化，要实现它需要给动画一个延时让动画沿着宽高来变化，但是一个长方形有两个宽高，所以，伪元素::after, ::before两个都需用上,
鼠标移入前：
伪元素::before transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in,
伪元素::after transition::border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s。

鼠标移入时：
伪元素::before transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
伪元素::after transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;

css代码如下：

.l-border{
    display: inline-block;
    padding: 16px 32px;
    border: 1px solid #ebebeb;
    -webkit-transition: all 0.6s ease-in;
    transition: all 0.6s ease-in;
}

.l-border:hover{
    border: 1px solid #367dff;
}
.border-line {
    position: relative;
    display: inline-block;
    height: 100%;
    background: none;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 0px transparent;
}

.border-line::after,
.border-line::before {
    position: absolute;
    content: ‘‘;
    display: block;
    width: 0;
    height: 0;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.border-line::after {
    top: 0;
    left: 0;
    -webkit-transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
    transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
}

.border-line::before {
    bottom: 0;
    right: 0;
    -webkit-transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
    transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
}

.border-line:hover::after,
.border-line:hover::before {
    width: 100%;
    height: 100%;
}

.border-line:hover::after {
    border-top-color: #367dff;
    border-right-color: #367dff;
    -webkit-transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
    transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
}

.border-line:hover::before {
    border-bottom-color: #367dff;
    border-left-color: #367dff;
    -webkit-transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
    transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
}

border-anim3.gif

这个动画有两部分组分成：一是中间文字内容的变形translate,然后加上一个transition过渡来组成；二是边框的动画，它是第一个示例动画的组合。
伪元素::after控制border-left,border-right的动画，伪元素::before控制border-top,border-bottom的动画。

html代码：

  <div class="effect-box">
        ![](./img/bg.jpg)
        <div class="border-line2">
            <p> 319 </p>
            <p> 布局和界面</p>
            <p>Read More</p>
        </div>
    </div>

css代码如下：

.effect-box {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 250px;
    height: 158px;
    background: rgba(53, 172, 197, 1);
    cursor: pointer
}

.effect-box img {
    display: block;
    width: 100%;
    height: 100%;
    opacity: .7;
    -webkit-transition: opacity .35s;
    transition: opacity .35s
}

.effect-box:hover img {
    opacity: .4
}

.effect-box .border-line2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 2em;
    font-size: 1.25em;
    color: #fff;
    text-transform: uppercase;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.effect-box .border-line2::after,
.effect-box .border-line2::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: ‘‘;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity .35s, -webkit-transform .35s;
    transition: opacity .35s, transform .35s
}

.effect-box .border-line2::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1)
}

.effect-box .border-line2::after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0)
}


.effect-box:hover .border-line2::after,
.effect-box:hover .border-line2::before {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.effect-box .border-line2 p {
    padding: 4px 10px;
    margin: 0;
    font-size: 16px;
    line-height: 1.0;
    text-align: center;
    color: #fff;
    letter-spacing: 1px;
    opacity: 0;
    -webkit-transition: opacity .35s, -webkit-transform .35s;
    transition: opacity .35s, transform .35s;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0)
}

.effect-box:hover .border-line2 p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

自我开发阶段

一个好的web前端工程师，不会仅仅停留在学习和模仿的阶段，同时作为一个好的程序员或有志于成为一个web前端大神的同学来说，写出有自己风格和和特性的css动画是必不可少。那么接下来我就谈一谈我在开发的过程中总结的一点东西。

1.区别css动画的使用场合，pc端或者移动端。pc端，transition，animation,transform之间的组合可以任意使用；移动端按照animation，transform，transition的顺序来使用来制作动画。
2.根据做wap或者pc的项目不同，wap端我强烈的推荐使用3d动画，一是移动端的支持度高，二是使用3d可以进行硬件加速动画。
3.如果要做的动画要要控制状态，设置动画的模式，transition和transform可以不考虑，而直接使用animation来实现animation-play-state控制状态，animation-fill-mode设置模式。
4.做3d动画，就要用到视点，以及要理解在3维空间中改变某一维度值动画如何运动。
5.css动画的局限性也是必须要了解的，例如曲线动画的实现，基于物理的动画实现。而解决曲线动画的实现的替代方案就是结合svg来实现路径动画；而对于后一种物理动画实现的替代方案暂无（正在查找与思考中）。

css动画的制作就分享到这里了，有兴趣的同学可以私聊我，我们来一起讨论，后期若有做css动画好的想法我会继续分享给大家。