转载

hover动画之背景椭圆缩放

这两天我们来试试写一些鼠标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);         transform: scale(0);     }     to {        background: transparent;         transform: scale(2);     } }

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

本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=208 ,欢迎大家传播与分享.

原文 http://www.wutongwei.com/front/infor_showone.tweb?id=208

正文到此结束