hover动画之背景椭圆缩放

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-02-22 10:46:29.0

这两天我们来试试写一些鼠标hover后的动画效果的编写, hover这种状态在很多地方都会出现, 一般网站, 或者H5页面可能都会有意的出现.


今天来试一个简单的效果, 背景椭圆的缩放.


首先将HTML代码结构编写好

代码名称

 <a href=""> hover </a>


这个代码非常简单, 下面还得利用伪元素:after来进行动画处理. border-radius的设置就会将伪元素设置为一个椭圆. left, top, right, bottom都为0, 则是设置其宽度, 高度和父元素相同.


代码名称

 a {

    display: inline-block;

    background-color: #666666;

    color: #fff;

    padding: 10px 50px;

    text-decoration: none;

    position: relative;

    overflow: hidden;

}

a:after {

    content: " ";

    border-radius: 50%;

    position: absolute;

    left: 0;

    top:0;

    right: 0;

    bottom: 0;

    z-index: 1;

}


然后加入动画, 鼠标放上这个链接之时, 动画将会从有到无, 这里就利用了background和 scale动画.


代码名称

a:hover:after {

    animation: anims 1s;

}


@keyframes anims {

    from {

        background: rgba(0, 0, 0, 0.25, 0, 0);

        transform: scale(0, 0, 0);

    }

    to {

       background: transparent;

        transform: scale(2, 0, 0);

    }

}


效果完成. 总结一下: 这个动画, 主要是利用了伪元素作为遮罩层, 利用遮罩从有到无的效果, 然后在1S内完成该动画.


android项目没有android.jar这个依赖包的解决办法
|
hover动画之 斜角背景