css-点击按钮实现水滴动画

最新推荐文章于 2024-02-16 11:57:49 发布
最新推荐文章于 2024-02-16 11:57:49 发布
阅读量3.2k 收藏 5
点赞数
分类专栏： 动画交互 文章标签： CSS

平常在使用APP的时候，当用户点击某个按钮的时候，按钮会出现水滴的效果，原生APP开发的时候，会提供相关的动画，如果在PC端或者H5的时候想实现这个效果，也可以找一些相关的库来进行开发，但是为了某一个小小的交互而引入外部的JS和CSS，始终感觉不划算，自己如果用css+js来进行开发，可能体验和开发会更加方便。

一、CSS

<style>
	.btn {
	    display: block;
	    width: 300px;
	    height: 100px;
	    line-height: 100px;
	    outline: 0;
	    overflow: hidden;
	    position: relative;
	    transition: .3s;
	    text-align: center;
	    cursor: pointer;
	    user-select: none;
	    font-size: 50px;
	    background: tomato;
	    color: #fff;
	    border-radius: 10px;
	}
	
	.btn>span {
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	}
	
	.btn>span:after {
	    content: '';
	    background: transparent;
	    border-radius: 50%;
	    width: 100%;
	    padding-top: 100%;
	    position: absolute;
	    margin-left: -50%;
	    margin-top: -50%;
	    left: var(--x, -100%);
	    top: var(--y, -100%);
	}
	
	.btn>input[type=checkbox] {
	    display: none
	}
	
	.btn>input[type=checkbox]+span:after {
	    animation: ripple-in 1s;
	}
	
	.btn>input[type=checkbox]:checked+span:after {
	    animation: ripple-out 1s;
	}
	
	@keyframes ripple-in {
	    0% {
	        transform: scale(0);
	        background: rgba(0, 0, 0, .25)
	    }
	    100% {
	        transform: scale(1.5);
	        background: transparent
	    }
	}
	
	@keyframes ripple-out {
	    0% {
	        transform: scale(0);
	        background: rgba(0, 0, 0, .25)
	    }
	    100% {
	        transform: scale(1.5);
	        background: transparent
	    }
	}
</style>
//tip：var()是CSS3提供的函数属性值修改
//地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/var

二、HTML

<body>
	<label class="btn" tabindex="1">
        <input type="checkbox">
        <span onclick="ripple(this,event)">这是一个可点击区域</span>
    </label>
</body>

三、js

//获取当前用户点击的位置，然后从当前点击的位置进行放大
<script>
   function ripple(dom, ev) {
        var x = ev.offsetX;
        var y = ev.offsetY;
        dom.style.setProperty('--x', x + 'px');
        dom.style.setProperty('--y', y + 'px');
    }
</script>
//setProperty()用来从新设置一个新的CSS属性
//地址：http://www.runoob.com/jsref/met-cssstyle-setproperty.html

内容非原创，只是把原有的代码进行copy了，目前需要优化的就是按钮的封装，以及结构的布局以及样式修改。
原作者文章地址：https://segmentfault.com/a/1190000016758776

wanxchao
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3按钮点击过渡动画特效
06-11
一组扁平化风格的css3按钮点击过渡动画特效，点击按钮动画效果，水波动画，缓慢的笔刷动画，气泡动画等。
css加载动画（水滴效果）
qq_25294327的博客
06-16 366
原理是先blur模糊处理，让物体边界重叠，再提高对比度，这样模糊边界就会变清晰。直接用filter自带的属性也可以实现，但调用svg滤镜效果会更好。最终实现效果视频可以看我Dou音，DY号：G_console。
CSS实现一个粒子动效的按钮
最新发布
weixin_36499519的博客
02-16 850
原文链接https://github.com/XboxYan/no… 按钮(button)可能是网页中最常见的组件之一了，大部分都平淡无奇，如果你碰到的是一个这样的按钮，会不会忍不住多点几次呢？ 通常这类效果第一反应可能就是借助canvas了，比如下面这个案例(建议去codepen原链接访问，segmentfault内置的预览js会加载失败) 效果就更加震撼了，当然canva...
border_radius属性画出水滴样式
01-30
border_radius属性画出水滴样式
利用css3-animation实现逐帧动画效果
09-24
主要介绍了利用css3-animation实现逐帧动画效果的相关资料，感兴趣的小伙伴们可以参考一下
纯css实现Material Design中的水滴动画按钮
12-13
前言 大家平时应该经常见到这种特效，很炫酷不是吗 这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和css，其实在已有的项目中，可能只是想加一个这样的按钮，来增强用户体验，这些js库就显得有些过于庞大了，同时由于是js实现，很多时候还要注意加载问题。 那么，有没有办法用css来实现这一特效呢？ 思路 其实就是一个动画，一个正圆从小变大，用css3中的动画很容易实现 示例代码 @keyframes ripple{ from { transform: scale(0); opa
分享几个水滴效果的按钮
一起学习一起进步~
07-25 195
先看效果： 再看代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水滴效果的按钮</title> <link rel="stylesheet" href="https://codepen.io/nicolasjesenberger/pen/GRYvOWy/d5176f9552830811da3e2bde012
使用css实现水珠/水滴效果
公众号 @ 桃小瑞
12-07 1525
使用 css 实现水珠/水滴效果
css动态水滴效果
qq_62403061的博客
02-26 1013
纯css动画完成动态水滴效果
CSS实现水滴动效
很高兴你能看到这里
07-29 9028
哈喽哈喽！CSS真的好好玩啊，哈哈，反正我是爱了，空闲写着玩。画画不好的我乐了，下面就是一个用CSS3动画完成的模仿水珠的动效，其中主要就是会使用CSS设置阴影效果以及@keyframes关键帧和一些选择器的技术，快来学习吧！ ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
weixin_33216916的博客
05-31 384
纯css如何实现按钮的水滴动画效果？下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。前言大家平时应该经常见到这种特效，很炫酷不是吗这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和css，其实在已有的项目中，...
css3实现点击提交按钮加载进度条动画特效.zip
07-11
js代码 [removed] const button = document.querySelector('.button'); const submit = document.querySelector('.submit'); function toggleClass() { this.classList.toggle('active'); } function addClass() { this.classList.add('finished'); } button.addEventListener('click', toggleClass); button.addEventListener('transitionend', toggleClass); button.addEventListener('transitionend', addClass);[removed] </body>
CSS3点击按钮实现背景渐变动画效果
12-13
效果图如下： 实例代码如下： 复制代码代码如下:<!DOCTYPE html><html><head><meta charset=”utf-8″ /><meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ /><title>css3给按钮添加背景渐变动画</title><!–@author：SM @email:[email protected]@desc： css3给按钮添加背景渐变动画–><style type=”t
‘纯css实现Material Design中的水滴动画按钮’的js体验优化
weixin_34194702的博客
10-22 165
前言 在上一篇，我们已经实现了用纯css实现水滴扩散动画，但是有一些瑕疵，文章结尾处也提到过，一是页面加载进来就会看到按钮上的水滴动画运动一次，二是点击的时候不能根据鼠标的位置来扩散，今天我们来解决这个问题。 以下所有基础代码均来自上一篇 css中只能做到固定的点扩散 无法避免的js 虽然我很想通过css来实现想要的效果，毕竟属于UI交...
android+水滴粘性动画,纯css实现Material Design中的水滴动画按钮
weixin_30543595的博客
05-25 267
前言大家平时应该经常见到这种特效，很炫酷不是吗这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和css，其实在已有的项目中，可能只是想加一个这样的按钮，来增强用户体验，这些js库就显得有些过于庞大了，同时由于是js实现，很多时候还要注意加载问题。那么，有没有办法用css来实现这一特效呢？思路其实就是一个动画，一个正圆从小...
一个简单的呼吸灯效果
tinfengyee的博客
12-14 1253
一个简单的呼吸灯效果 图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
CSS动画按钮实例
six6de6的博客
07-14 1308
十分钟学会炫酷按钮
纯css实现水波流动效果
wuliyouMaozhi的博客
08-07 4138
纯css实现水波流动效果：先实现一个装水的容器，可以通过box-shadow给容器增添点厚度的感觉 水的实现，其实就是一个纯色的背景 接下来就是波纹的实现 思考下现有的css属性可以有这样的效果吗？ 答案是否定的，那我们怎样通过dom+css来实现这样的效果呢？ 我们可以看到波纹的行动轨迹是有规律的，再仔细观察后会发现其实每四个小周期是一个循环，每四个小周期之后的动画都是固定的.........
神奇的css（动态水滴）
m0_58730471的博客
10-28 661
动态水滴
css怎么点击按钮再播放动画
07-14
要实现点击按钮后播放动画，你可以使用CSS的`animation`属性和JavaScript来实现。下面是一种常见的方法： 1. 创建CSS动画： ```css @keyframes yourAnimation { 0% { /* 起始状态 */ } 100% { /* 终止状态 */ }...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值