html涟漪动画效果,CSS 在按钮上做个涟漪效果(Ripple Animation)
作为一个 CSS 渣,这次在看到一个 Vue 组件库的按钮里有个点按之后的效果之后跃跃欲试。
效果大概长这样:
首先先观察了一番,大概得到以下特征:
以鼠标按下的位置为原点,以 某个值 为半径进行扩散
在长宽、以及透明度上,均有渐变
原本是 Vue 实现的,但剥离框架实现,就还得在 JavaScript 上哲学一番,为此,我实现了一个较为简单的效果,这篇文章基本上是逐行总结解读:
HTML 结构:
涟漪效果
勿用说明,这个按钮是由内容和涟漪效果的背景组成的,内容在 Vue 中也就是 进来的文本。
之后,大致写一些基本样式,和动画核心代码没有太大关系:
button {
overflow: hidden;
border: 1px solid #000;
padding: 12px;
cursor: pointer;
position: relative;
margin: 10px;
}
.content {
position: relative;
display: inline-block;
}
要实现这个效果,我们主要考虑的就是上述总结的两点,首先,如何以一个地方为中心点,向两边扩散。
为了获取鼠标位置,我们使用的是 event.offsetX 和 event.offsetY ,但是如果光这样对 background 进行绝对定位,达到的效果是以起始点为左上角开始的动画,为了变成中心点,我们自然想到了 transform: translate(-50%, -50%) ,成功把左上角转成了中心点。
接下来,我们需要确定动画中圆的半径,考虑到 button 通常都是宽 > 长的,所以取宽( button.clientWidth )为半径做圆。
另外,我们要保证鼠标点击在任一按钮区域都可以填充满,所以宽度至少需要为本身的 3 倍。
最终,我们的样式是:
{
left: event.offsetX + 'px',
top: event.offsetY + 'px',
width: button.clientWidth * 3 + 'px',
height: button.clientWidth * 3 + 'px'
}
全部准备完成之后,使用 transition 对我们的动画进行补间:
transition: width 3s ease, height 3s ease, opacity 1s ease;
全部的代码和效果见下方 jsfiddle 的演示:
但是,如果我们使用 CSS Houdini,整个动画的实现将会是非常容易的:
.ripple {
--gradient: linear-gradient(to bottom right, deeppink, orangered);
background: var(--gradient);
}
.ripple.animating {
background: paint(ripple), var(--gradient);
}
html涟漪动画效果,CSS 在按钮上做个涟漪效果(Ripple Animation)相关推荐
- html hover 效果,CSS八种让人眼前一亮的HOVER效果的示例代码
一.发送效果HTML // 这里是一个svg的占位 Send CSS #send-btn{ display: flex; align-items: center; justify-content: c ...
- html如何做好看的图片效果,CSS使用图片美化的漂亮菜单效果
本文实例讲述了CSS使用图片美化的漂亮菜单效果.分享给大家供大家参考.具体如下: 这里介绍的这个菜单很漂亮,因为每个菜单项都是调用的图片,感觉这个菜单有点华而不实,毕竟菜单太多会影响网页加载,一个菜单 ...
- 怎么做圆一圈圈扩散效果_推广为什么没有效果,网络推广怎么做才有效果?
那么,想要网站推广效果好,应该怎么做呢?很简单,一要团队,二要分工.网站推广主要包括三个方面:内容.外链和需求客户.那么,分别有专人在这三个方面负责,术业有专攻,如此,才能不断摸索中见到效果. 网站内 ...
- CSS 实现按钮及线呼吸灯效果
1. [代码]style view sourceprint? 01 <style> 02 body{ 03 font-fam ...
- CSS实现按钮点击后根据背景色加深效果
具体代码如下 button{position: relative; } button:active::before {display: block;content: '';position: abso ...
- css实现文字上下滚动轮播效果
lizuncong (lizuncong) · GitHubI am a strong believer in reverse engineering. lizuncong has 42 reposi ...
- html图片自带闪光效果,CSS实现的一闪而过的图片闪光效果
只需要两个HTML元素和一个CSS变换,我就能创造出我自己的闪光效果.让我们来实现它! 呈现光泽图片 下面就是这张Addy在他博客上使用的图片: 比我需要的要大一些,但你可以把它裁剪一些. 注意:左边 ...
- php网页如何做出透明的效果,css+filter实现简单的图片透明效果
完成简单的透明度控制功能 使用filter的功能对图片元素进行透明度控制. 支持IE8,Chrome浏览器. 复制代码代码如下: /*透明20%*/ .opacity-20 { filter:alph ...
- 如何在html上做弹框效果,网页|利用提示框(Tooltip)实现弹窗效果
一.提示框的运用 二.Tooltip简单介绍 提示工具(Tooltip)是一个插件,可以根据需求生成标记内容,但在默认情况下是把提示工具(tooltip)放在它们的触发元素后面.在bootstrap中 ...
最新文章
- 3dmax Vray建筑可视化入门学习教程
- PHP数组键值双引号单引号区别
- Docker(二)容器操作容器
- 苹果发布新手机,会有多少国人支持呢?
- java addfirst_java – ArrayDeque类的addFirst方法
- fn:replace()函数
- python怎么输入两个数然后求差值_python两个日期之间天差值获取
- @RequestBody、@ResponseBody的具体用法和使用时机
- 7.js模式-装饰者模式
- LeetCode(566)——重塑矩阵(JavaScript)
- SVN安装后bin中没有svn.exe,TortoiseSVN安装后bin目录中没有svn.exe;
- 电脑桌面计算机英语,IT计算机英语词汇
- 类加载器详解(自己实现类加载器)
- Module not found: Error: [CaseSensitivePathsPlugin]
- 循环神经网络的从零开始实现
- ClippingNode做游戏的新手指导
- ShaderToy Matlab OpenGL实现流动Love
- docker add new port
- HTML文字动画,缓慢浮入
- C# 保存窗口为图片(保存纵断面图)
热门文章
- python官网学习爬虫资料_Python爬虫学习?
- 小猿日记 - 程序猿的日常日记(3)
- C#读取txt 乱码问题的解决方案
- SSM流浪狗领养系统
- MSDC 4.3 接口规范(11)
- 点与直线位置关系,叉乘
- outlook安全模式修复_Outlook Com安全漏洞Microsoft无法修复
- 2020年全球柿子产业发展概述及产业发展趋势分析[图]
- 开源框架Volley的使用《一》
- 论文笔记 NLPCC 2016|A Convolution BiLSTM Neural Network Model for Chinese Event Extraction