07月19, 2016

CSS3波纹记录

css3波纹的实现。

先来一个简单的demo,自己写的

点击出来波纹效果

注:这个代码用了setTimeout不是太好,但主要是为了解决再次点击时,还能出来波纹。

代码原理

就是一开始有一个缩放为0,透明度为1,背景为红色的圆,当点击document时,给这个DOM加一个“逐渐放大到2倍,且慢慢消失”的动画,产生一种波纹的感觉。

按钮上波纹的实现

首先按钮是相对定位,并且要overflow:hidden(理由是不超出隐藏的话,圆会整个显示出来)。圆在按钮里面,绝对定位。

圆的半径取按钮的长/宽(长>宽,取长,反之则取宽)。它的背景色不能简单粗暴地用红色代替了,我们可以使用半透明。

圆的坐标点计算:

var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop;
var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;

拿left来说,就是先算出鼠标当前位置离按钮的左边距的距离,再减去圆的半径,就是left值,上面还要减去document.body.scrollLeft,是考虑到了页面可能会有横向滚动条。

参考资料

本文链接:www.my-fe.pub/post/css-record-2.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。