button按钮onclick触发不了_手把手教你深入CSS实现一个粒子动效的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢?
转载链接: https://github.com/XboxYan/notes/issues/16
通常这类效果第一反应可能就是借助canvas了,比如下面这个案例点击预览(建议去codepen原链接点击预览访问,segmentfault内置的预览js会加载失败)
效果就更加震撼了,当然canvas实现也有一定的门槛,而且实际使用起来也略微麻烦(所有js实现的通病),这里尝试一下CSS的实现方式。
生成粒子
抛开js方案,还有HTML和CSS实现方式。HTML就不用说了,直接写上大量的标签
button ...
一般情况下我不是很喜欢这种方式,标签太多,结构不美观,而且有可能对现有的页面造成其他影响(很多情况下并不方便修改原始HTML结构)
那么来看看CSS实现方式,主要也是两种方式,其实就是想一下有哪些属性可以无限叠加,一个是box-shadow,还有一个是background-image(CSS3支持无限叠加)。
1.box-shadow
我们先看看box-shadow方式,为了避免使用额外标签,这里采用伪元素生成。
.button::before{ position: absolute; content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: #ff0081; box-shadow: 10px 10px #ff0081,15px 0px 0 2px #ff0081,20px 15px 0 3px #ff0081,...;/*无限叠加*/}
效果还是有的,主要就是多花点时间来调试,这里主要根据偏移量和扩展来决定粒子的位置和大小。
不过这里的偏移量只能是px单位,无法很好的自适应按钮的大小,所以这里采用第二种方式来实现
2.background-image
CSS3中background-image是可以无限叠加的,类似于
.myclass { background: background1, background2, /*...*/ backgroundN;}
这里我们可以采用径向渐变radial-gradient来实现多个小圆点。
.button::before{ position: absolute; content: ''; left: -2em; right: -2em; top: -2em; bottom: -2em; pointer-events: none; background-repeat: no-repeat; background-image: radial-gradient(circle, #ff0081 20%, transparent 0), radial-gradient(circle, #ff0081 20%, transparent 0), radial-gradient(circle, #ff0081 20%, transparent 0), radial-gradient(circle, #ff0081 20%, transparent 0), ...; background-size: 10% 10%, 20% 20%, 15% 15%,...; background-position: 18% 40%, 20% 31%, 30% 30%,...;}
这里主要通过background-size和background-position来控制原点的尺寸与位置,看着好像挺复杂,其实只要background-size和background-position与background-image位置一一对应就行了。实际开发中可能有点难调试,可以直接在控制台中通过键盘上下左右键微调实时预览效果(可以考虑做一个可视化工具)。
这样就做出了一个简单的粒子效果。
动起来
虽然background-image不支持CSS动画,但是另外两个background-size和background-position支持呀,所以,CSS transition和CSS animation都可以用起来。
动画效果很简单,就是粒子从中心往外扩散,并且逐渐消失的过程。
transition
我们先看看:hover交互
.button::before{ transition:.75s background-position ease-in-out,75s background-size ease-in-out;}.button:hover::before{ background-position: 5% 44%, -5% 20%, 7% 5%...; background-size: 0% 0%;}
当然直接这样设置肯定是不理想,鼠标离开时会收缩回去,效果如下
我们需要是鼠标离开时不收缩回去,如何实现呢?
很简单,把transition设置在:hover下就可以了,表示只有当鼠标经过时才有过渡,离开时没有
.button:hover::before{ background-position: 5% 44%, -5% 20%, 7% 5%...; background-size: 0% 0%; transition:.75s background-position ease-in-out,75s background-size ease-in-out;}
这样是不是感觉稍微好些了呢?点击这里点击预览查看。
如果我们想做成点击的时候出现粒子动画该怎么做呢?这里就需要借助:active伪类了。
如果我们按照:hover逻辑,那么
.button:active::before{ background-position: 5% 44%, -5% 20%, 7% 5%...; background-size: 0% 0%; transition:.75s background-position ease-in-out,75s background-size ease-in-out;}
很遗憾,只有当只有按住不动的时候才能触发,一旦鼠标抬起就没有了,这个时候我们就需要换个角度了。可以这么想象一下,默认就是发散的,然后点击的时候聚拢,抬起的时候就会有还原成之前的发散状态,同时,在点击的时候需要取消掉过渡效果,如下
.button::before { /*...*/ background-position: 5% 44%...;/*扩散的状态*/ background-size: 0% 0%; transition: background-position .5s ease-in-out, background-size .75s ease-in-out;}.button:active::before { transition:0s;/**注意取消掉过渡**/ background-size: 10% 10%, 20% 20%...; background-position: 18% 40%, 20% 31%,...;}
你可以查看这个demo点击预览
为什么在:active需要transition:0s呢,你可以试下不添加的效果就明白了,如下
animation
animation和transition实现原理比较类似,优点是可以做出更加精细的动画,这里就拿:active方式来说吧。
.button::before{ /*...*/ animation: bubbles ease-in-out .75s forwards;}.button:active::before { animation: none; /*这里注意取消动画*/ background-size: 0;}@keyframes bubbles { 0% { background-position: 18% 40%, ...; } 50% { background-position: 10% 44%, ...; } 100% { background-position: 5% 44%, ...; background-size: 0% 0%; }}
可以在这里点击预览查看源码。
唯一的不足可能是初始化动画会自执行一次。
小结
上面介绍了纯CSS实现一个粒子动效的按钮,优点很明显,复制一下CSS直接扔到项目里就能用,管他什么原生项目还是react项目,也无需绑定什么事件,也无需额外的逻辑处理,增强现有体验。试想一下,如果这是一个‘购买’按钮,会不会触发你多购买几次呢,反正我肯定是会被吸引住了,哈~缺点也还是有的,比如上面的定位,密密麻麻都是工作量啊,建议这些功能在项目整体完成之后再细细打磨,也可以试着做一些可视化工具来减轻工作量,完。
button按钮onclick触发不了_手把手教你深入CSS实现一个粒子动效的按钮相关推荐
- 怎么实现hover_web前端CSS实现一个粒子动效的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 通常这类效果第一反应可能就是借助canvas了,比如下面这个案例点击预览( ...
- button按钮onclick触发不了_单按钮启停:测试模拟脉冲发生器的动作
灯闪烁所模拟是PLC单方面向控件输出信号的过程, 控件也可以向模拟PLC输出信号. 做一个带反馈灯的按钮,被按下后点亮,再按一下熄灭,且使按钮自保需要一定的接触时间. 对应的PLC程序 需要一个脉冲发 ...
- 如何用python开发游戏_手把手教你用Python完成一个控制台小游戏-阿里云开发者社区...
很多人想学Python程序设计或者已经了解过一点Python程序设计基础,却没办法开发出一个项目. 今天,通过演示一个简单的控制台小游戏制作,手把手教你如何用Python编写一个游戏程序,即便你是个新 ...
- 手把手教你用CSS实现一个VR 3D游戏菜单栏效果
3D游戏菜单组件 关于如何建立一个响应性.适应性和无障碍的3D游戏菜单的基础性概述. 在这篇文章中,我想带着大家写一个3D游戏菜单组件的案例.首先让我们看看成品是什么样子的 概述 相信大家都玩过赛博朋 ...
- vue代码生成器可视化界面_手把手教你基于SqlSugar4编写一个可视化代码生成器(生成实体,以SqlServer为例,文末附源码)...
在开发过程中免不了创建实体类,字段少的表可以手动编写,但是字段多还用手动创建的话不免有些浪费时间,假如一张表有100多个字段,手写有些不现实. 这时我们会借助一些工具,如:动软代码生成器.各种ORM框 ...
- java怎么实现网络对战平台_手把手教你用Java实现一个简易联网坦克对战小游戏...
介绍 通过本项目能够更直观地理解应用层和运输层网络协议, 以及继承封装多态的运用. 网络部分是本文叙述的重点, 你将看到如何使用Java建立TCP和UDP连接并交换报文, 你还将看到如何自己定义一个简 ...
- 如何用java让坦克发射子弹_手把手教你用Java实现一个简易联网坦克对战小游戏 !...
介绍 通过本项目能够更直观地理解应用层和运输层网络协议, 以及继承封装多态的运用. 网络部分是本文叙述的重点, 你将看到如何使用Java建立TCP和UDP连接并交换报文, 你还将看到如何自己定义一个简 ...
- python国际象棋ai程序_手把手教你用 JavaScript 实现一个简单的国际象棋 AI
转载请注明出处,保留原文链接以及作者信息 首先让我们先看几个对开发简单国际象棋 AI 很有帮助的概念: 移动生成 局面评估 极大极小算法 α-β 剪枝 每一步中我们都会对经过时间检验的国际象棋程序进行 ...
- python做一个问答系统_手把手教你用Python搭建一个AI智能问答系统
导读:智能问答系统是自然语言处理的一个重要分支.今天我们将利用分词处理以及搜索引擎搭建一个智能问答系统. 本文经授权转自公众号CSDN(ID:CSDNnews) 作者:李秋键 具体的效果如下所示: 下 ...
最新文章
- Java 8新特性——default方法(defenece方法)介绍
- 一句话总结贝叶斯分类器
- (转)Ubuntu10.04各文件夹的作用
- HTML5_1 笔记
- CRM 702和CRM 712的区别
- shiro学习(16):使用注解实现权限认证和后台管理二
- 使用WebService如何实现分布式事务
- 手机MODEM开发( 25)---如何配置VoLTE, ViLTE and VoWifi(IMS config for VoLTE, ViLTE and VoWifi)
- 中后台管理信息系统通用原型方案、业务中台管理系统、业务中台架构、管理信息系统、订单管理、客户管理、货源管理、财务管理、客服管理、营销管理、办公申请、协作管理、CMS、OA、CRM、ERP、Axure
- 素数生成器的算法【PHP EDITION】
- 计算机病毒影响打印机,病毒捣乱影响网络打印机共享打印
- w10系统服务器管理器,Win10如何打开服务管理器
- json 日期格式化
- php版本微信公众号开发
- linux下LTP工具说明
- ads1278_基于ADS1278的高精度微应变信号采集系统
- 1024 祝我们快乐
- 鸿蒙系统代还,连米粉都骂的小米11 ultra,现在还能有人买吗?
- 写脚本的作用是什么?做自媒体,什么样的视频一定要写脚本?
- mysql 主从复制 error 1677