怎么实现hover_web前端CSS实现一个粒子动效的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢?
通常这类效果第一反应可能就是借助canvas
了,比如下面这个案例点击预览(建议去codepen原链接点击预览访问,segmentfault内置的预览js会加载失败)
效果就更加震撼了,当然canvas
实现也有一定的门槛,而且实际使用起来也略微麻烦(所有js
实现的通病),这里尝试一下CSS
的实现方式。
生成粒子
抛开js
方案,还有HTML
和CSS
实现方式。HTML
就不用说了,直接写上大量的标签
<button> button<i>i><i>i><i>i><i>i><i>i> ...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{
很遗憾,只有当只有按住不动的时候才能触发,一旦鼠标抬起就没有了,这个时候我们就需要换个角度了。可以这么想象一下,默认就是发散的,然后点击的时候聚拢,抬起的时候就会有还原成之前的发散状态,同时,在点击的时候需要取消掉过渡效果,如下
.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
项目,也无需绑定什么事件,也无需额外的逻辑处理,增强现有体验。试想一下,如果这是一个‘购买’按钮,会不会触发你多购买几次呢,反正我肯定是会被吸引住了,哈~
缺点也还是有的,比如上面的定位,密密麻麻都是工作量啊,建议这些功能在项目整体完成之后再细细打磨,也可以试着做一些可视化工具来减轻工作量,完。
为了帮助大家学习前端,让学习变得轻松,高效!今天给大家分享一套教学资源,从最零基础开始的的HTML+CSS+JavaScript。jQuery,Ajax,node,angular框架等帮助大家在学习Web前端的道路上披荆斩棘
这套资源的领取方式如下:
点击在看 分享出去,然后加小编Web前端学习QQ群:1039711626(这次的代码在群里可以获取)
声明:文章著作权归作者所有,如有侵权,请联系小编删除。
怎么实现hover_web前端CSS实现一个粒子动效的按钮相关推荐
- button按钮onclick触发不了_手把手教你深入CSS实现一个粒子动效的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 转载链接: https://github.com/XboxYan/note ...
- CSS-动效 纯css粒子动效 | 转圈圈 | 上下弹动
文章目录 粒子动效 转圈圈 上下弹动 粒子动效 拾人牙慧,主要是利用css的box-shadow属性,设置便宜点位,然后加上animation属性失效的效果. PS:实际使用中发现如果屏幕尺寸很宽的话 ...
- three相机在模型上_基于 three.js 的 3D 粒子动效实现
作者:个推web前端开发工程师 梁神 一.背景 粒子特效是为模拟现实中的水.火.雾.气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器.脚本来控制其整体或单 ...
- canvas 文字颜色_canvas 中普通动效与粒子动效的实现
(给前端大全加星标,提升前端技能) 作者:薄荷前端 https://github.com/BooheeFE/weekly/issues/26 canvas 用于在网页上绘制图像.动画,可以将其理解为画 ...
- Vue+Echarts构建可视化大数据平台实战项目(上)粒子动效,登录界面抖动,背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言 分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
- css实现红包雨动效
提示:该实现方法灵敏度似乎不高 并且如果一直不点击红包,或者触发点击过慢,会出现屏幕上红包过多的问题(就是说不能让屏幕上的红包一直保持在一个均匀的量),另外一个缺点就是红包会重叠 css实现红包雨动效 ...
- Android自定义View高级动效---粒子动效实现|音乐播放器粒子动效|实现酷我网易云粒子动效
篇章目标介绍 之前看到网易云,酷我音乐都发布过用于播放器页面粒子动效的效果,于是打算自己也动手做一个,产品目标是对标酷我手机app的动效设计,实现过程完全基于自身的推测理解予以实现.计划通过两次完全完 ...
- Canvas实现网页星空背景粒子动效跟随光标
目 录 1. 设计思路 2. 星空背景图片 3. 页面代码 4. 效果图 1. 设计思路 1. 利用样式插入星空背景图片: 2.设置窗口改变时自动修改画布大小(自适应): 3. 编写随机函数(随机数 ...
- 【Vue粒子动效插件】Vue3之vue-particles实现一个科技粒子动画登录页面,Picker It~
vue-particles: 安装 npm install vue-particles --save-dev 引入 main.ts import Vue from 'vue' import VuePa ...
最新文章
- 用Linux虚拟机手工编译安装Apache
- 成功解决python\ops\seq2seq.py TypeError: ms_error() got an unexpected keyword argument 'labels'
- Redis的设计与实现之对象
- 第三次学JAVA再学不好就吃翔(part89)--HashSet
- 用友U9执行JS代码。
- JS之 if语句函数 对接事件动作 函数更改css css对接需要换妆的区id或class
- 数据结构排序法之堆排序he归并排序
- 联想高校AI精英挑战赛争霸浙江大学,“管道医生”项目晋级赛摘得桂冠
- 手把手让你实现postfix+extmail+mysql虚拟用户邮件体系
- 华为交换机忘记密码怎么办
- jvm分析工具JProfiler详解
- 微信小程序中长按识别二维码
- 读“DataBase Sharding at Netlog”,看DataBase Scale Out
- Android中的RAM、ROM、SD卡以及各种内存的区别
- Taro3 React hook怎么使用Taro-prase显示markdown文件?
- 百度的春晚战事:如何扛住腾讯、阿里都宕机的量?
- 使用ffmpeg将多个TS视频拼接成mp4视频
- 【Echarts】折线图/趋势图区间框选计算
- 国密浏览器介绍与下载
- 【目录和文件的管理】