怎么用java做水滴动画_‘纯css实现Material Design中的水滴动画按钮’的js体验优化...
前言
在上一篇,我们已经实现了用纯css实现水滴扩散动画,但是有一些瑕疵,文章结尾处也提到过,一是页面加载进来就会看到按钮上的水滴动画运动一次,二是点击的时候不能根据鼠标的位置来扩散,今天我们来解决这个问题。
以下所有基础代码均来自上一篇
css中只能做到固定的点扩散
无法避免的js
虽然我很想通过css来实现想要的效果,毕竟属于UI交互方面,尽量别扯上js,无奈后劲不足,很多功能确实无法实现,比如获取鼠标位置,这个css就真没辙了。
思考了很久,还是只能通过js来获取位置坐标了,但是我们可以减少js的逻辑,我们只需要知道坐标即可,剩下的给css来做就好了。
实现思路
css新特性
其实用的css很多新特性的话,很多以前只能通过js来实现的css也可以代替了。
css原生变量var,大家平时应该都接触过了吧。可能平时由于兼容性的问题,用起来缩手缩脚,干脆为了兼容性就不用了
其实只要不考虑IE的话兼容性还是可以的,就算要兼顾IE,可以保证按钮是完好的,只是没有动画效果不就可以了吗,这也是所谓的优雅降级吧
var的用法很简单
:root {
--main-bg-color: red;
}
.container {
width: 20px;
height: 20px;
background-color: var(--main-bg-color);/**background-color:red**/
}
有关var的详细用法,大家可以自行百度
全能js
我们用js只有一个目的,就是获取鼠标点击的位置
很简单,事件对象event中有个offsetX和offsetY就是用来描述鼠标位置相对于父元素的位置
其实这个属性早些年是IE私有的,谷歌和火狐看着好用,不知道从上面版本也都支持了,所以兼容性没太大问题~
var x = event.offsetX;
var y = event.offsetY;
具体实现
我们需要在点击的时候获取到左边,然后存在css变量中
示例代码
function ripple(ev){
var x = ev.offsetX;
var y = ev.offsetY;
this.style.setProperty('--x',x+'px');
this.style.setProperty('--y',y+'px');
}
没错,就这么一丁点js
相应的css部分我们要拿到我们保存的变量,来改变中心点的位置
.btn>span:after{
content: '';
position: absolute;
background: transparent;
border-radius:50%;
width: 100%;
padding-top: 100%;
margin-left: -50%;
margin-top: -50%;
left: var(--x,-100%);
top: var(--y,-100%);
}
这里我们解决了两个问题,
首次进来会触发一次:这里我们把left给了一个默认值-100%
left: var(--x,-100%);
也就是说,当前面的--x没有值或者非法的时候就会取后面一个值,-100%会让水滴动画的过程在视线之外触发,页面上根本看不见。
跟随鼠标点击的位置扩散:现在已经获取到了鼠标的位置,所以就很容易实现了鼠标在哪点击就从哪里扩散的问题
完整demo
小节
其实js实现是很简单的,css才是难点,css远比js灵活的多。比方说积木,积木的各种小零件是固定的,种类也有限,但是你可以组合出各种不同的玩具出来,可以称之为头脑创意吧,然而你组合出来一辆小汽车,却没法自动行驶,那么你就需要用上电机模组了,这是功能驱动。实际上在研发积木的过程中才是最耗费心思的地方,那些动力系统才是一层不变的。
怎么用java做水滴动画_‘纯css实现Material Design中的水滴动画按钮’的js体验优化...相关推荐
- android+水滴粘性动画,纯css实现Material Design中的水滴动画按钮
前言 大家平时应该经常见到这种特效,很炫酷不是吗 这是谷歌Material Design中最常见的特效了,市面上也有很多现成的js库,用来模拟这一特效.但是往往要引入一大堆js和css,其实在已有的项 ...
- 如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果?
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
- 纯CSS实现帅气的SVG路径描边动画效果
一.应该人人皆会的基础技术 简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 国外很多相关介绍的文章,来看看一些效果gif吧~ 纯CSS实现帅气的SVG路径描边动画效果 纯CSS实现帅气的SV ...
- 用css做一个移动射击动画,如何使用纯CSS实现一只移动的小白兔动画效果
本篇文章给大家带来的内容是关于如何使用纯CSS实现一只移动的小白兔动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 代码解读 定义 dom,页面中包含 2 个元素,分 ...
- html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果(附源码)...
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.com ...
- qt中实现左右分割线_一种快速刷新richedit中内嵌动画的方法的实现
在IM中使用动画表情是一种非常有趣的方式,然而选择一种合适的方式来实现却并不容易. 一般来说,除了自己去实现一个富文本控件,目前主要的解决方案有3种: 1.使用浏览器做容器. 2.使用QT提供的Ric ...
- css实现人走路效果,如何使用纯CSS实现一个人独自行走的动画效果(附源码)
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个人独自行走的动画效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github ...
- 雨伞连线题php fgetcsv,如何使用纯CSS实现一把雨伞开合的动画效果(附源码)
本篇文章给大家带来的内容是关于如何使用纯CSS实现一把雨伞开合的动画效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github. ...
- 纯CSS实现轮播图(结合动画)
图片自动切换实现原理:使用一个div(class="out")并设置溢出隐藏保证每次只显示一张,在内部设置另一个div.outer包裹所有的图片,图片均水平排列,包裹图片的div使 ...
最新文章
- 图解|零拷贝Zero-Copy技术大揭秘
- 作为程序员,这些梗你都答得上来吗?
- -i 可以编译添加多个_大咖说 | 基于 NXP i.MX8 eIQ 环境搭建和编译
- h5课件制作_一个好的h5交互课件该怎么制作
- js操作元素节点对象value
- Microsoft uaa bus driver for high definition audio
- angular ng-zorro 用组件自身方的法来重置表单校验
- printf 宏 调试技巧
- sheet中没有getcolumns()方法吗_家庭亲子教育中的八种方法,你做到了吗?
- 加拿大证券监管机构澄清加密公司监管规定
- 解决This application failed to start because cannot find or load the qt platform plugin 'xcb'
- Citrix 桌面云 XenApp_XenDesktop_7.15 部署系列(五)许可证配置
- 手机号码校验正则表达式
- Python简单监控键盘输入的木马实现
- 775针服务器cpu性能排行,CPU性能排行榜各种cup应有尽有
- js实现数字的千分化
- 攻防世界_Crypto_Decrypt-the-Message
- js 自动关闭html页面,JS关闭窗口与JS关闭页面的几种方法小结
- 谁的青春不似梦,谁的梦里不青春。
- ffmpeg_分割一个mp4文件到多个小的mp4文件