前端按钮动画

效果示例
在这里插入图片描述

代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>按钮点击动画1</title><style>@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');html,body {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background-color: #1f1f1f;font-family: 'Pacifico', serif;overflow: hidden;}span {position: relative;display: flex;align-items: center;justify-content: center;flex-grow: 1;}span::after {content: attr(data-text);position: absolute;background-color: #FC4F4F;border-radius: 10px;padding: 6px 20px;font-size: 22px;cursor: pointer;color: #fff;user-select: none;transition: transform 100ms ease-in;}span:active::after {transform: scale(0.9);}@keyframes pumping {50% {transform: scale(0.95);}}.shape {--size: 8px;position: absolute;top: calc(50% - var(--size));left: calc(50% - var(--size));width: calc(var(--size) * 2);height: calc(var(--size) * 2);animation: popup var(--d) cubic-bezier(.08, .56, .53, .98) forwards;}.heart {--size: 6px;background-color: var(--c);}.heart::before,.heart::after {content: "";position: absolute;width: 100%;height: 100%;background-color: var(--c);border-radius: 50%;}.heart::before {left: -50%;}.heart::after {top: -50%;}@keyframes popup {0% {opacity: 0;}60% {opacity: 1;}100% {opacity: 0;transform: translate(var(--x), var(--y)) rotate(var(--r));}}</style>
</head><body><span data-text="Click Me"></span><script>const colors = ['#FC4F4F', '#FFBC80', '#FF9F45', '#F76E11']// const shapes = ['square', 'circle', 'triangle', 'heart']const shapes = ['heart']const randomIntBetween = (min, max) => {return Math.floor(Math.random() * (max - min + 1) + min)}class Particle {constructor({ x, y, rotation, shape, color, size, duration, parent }) {this.x = xthis.y = ythis.parent = parentthis.rotation = rotationthis.shape = shapethis.color = colorthis.size = sizethis.duration = durationthis.children = document.createElement('div')}draw() {this.children.style.setProperty('--x', this.x + 'px')this.children.style.setProperty('--y', this.y + 'px')this.children.style.setProperty('--r', this.rotation + 'deg')this.children.style.setProperty('--c', this.color)this.children.style.setProperty('--size', this.size + 'px')this.children.style.setProperty('--d', this.duration + 'ms')this.children.className = `shape ${this.shape}`this.parent.append(this.children)}animate() {this.draw()const timer = setTimeout(() => {this.parent.removeChild(this.children)clearTimeout(timer)}, this.duration)}}function animateParticles({ total }) {for (let i = 0; i < total; i++) {const particle = new Particle({x: randomIntBetween(-200, 200),y: randomIntBetween(-100, -300),rotation: randomIntBetween(-360 * 5, 360 * 5),shape: shapes[randomIntBetween(0, shapes.length - 1)],color: colors[randomIntBetween(0, colors.length - 1)],size: randomIntBetween(4, 7),duration: randomIntBetween(400, 800),parent})particle.animate()}}const parent = document.querySelector('span')parent.addEventListener("touchstart", () => { }, false);parent.addEventListener('click', e => animateParticles({ total: 40 }))</script>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/717224.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OSCP靶场--Resourced

OSCP靶场–Resourced 考点(1.rpc枚举 2.crackmapexec密码喷洒&#xff0c;hash喷洒 3.ntds.dit system提取域hash 4.基于资源的约束委派攻击rbcd) 1.nmap扫描 ## ┌──(root㉿kali)-[~/Desktop] └─# nmap -sV -sC -p- 192.168.188.175 --min-rate 2000 Starting Nmap 7.9…

《一篇文章搞懂git(保姆级教学)》

目录 1.版本管理工具概念 2. 版本管理工具介绍 2.1版本管理发展简史(维基百科) 2.1.1 SVN(SubVersion) 2.1.2 Git 3. Git 发展简史 4. Git 的安装 4.1 git 的下载 ​4.2 安装 5. Git 工作流程 5.1 Git 初始化 5.2 git 流程 5.2.1 流程图 5.2.2概念即详解 6.Git …

IO多路复用:提高网络应用性能的利器

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

模型部署 - onnx的导出和分析 -(2) - onnx 注册自定义算子 - 学习记录

onnx 注册自定义算子 第一步&#xff1a;手写一个算子&#xff0c;然后注册一下第二步&#xff1a;将算子放进模型定义第三步&#xff1a;利用 torch.onnx.export() 编写onnx 导出函数 一般我们自定义算子的时候&#xff0c;有以下流程 编写算子并注册将算子放进模型定义利用 …

unity学习(46)——服务器三次注册限制以及数据库化角色信息1--数据流程

1.先找到服务器创建角色信息代码的位置&#xff0c;UserBizImpl.cs中&#xff1a; public PlayerModel create(string accId, string name, int job) {PlayerModel[] playerModelArray this.list(accId);//list是个自建函数&#xff0c;本质通过accId来查询if (playerModelAr…

ClickHouse数据引擎

ClickHouse 提供了多种索引引擎&#xff0c;每种引擎都有其特定的用途和特性。除了 MergeTree 引擎之外&#xff0c;以下是一些常见的索引引擎及其区别&#xff1a; MergeTree 引擎&#xff1a; 特点&#xff1a;有序、分布式、支持并发写入和读取。适用场景&#xff1a;适用于…

【高数】常数项级数概念与性质

下面为个人数学笔记&#xff0c;有需要借鉴即可。 一、常数项级数概念 二、常数项级数性质 三、调和级数 完。

备忘录模式(Memento Pattern)

定义 备忘录模式&#xff08;Memento Pattern&#xff09;是一种行为设计模式&#xff0c;它允许在不破坏封装性的前提下捕获一个对象的内部状态&#xff0c;并在以后将对象恢复到该状态。备忘录模式通常用于实现撤销操作&#xff08;Undo&#xff09;或历史记录&#xff08;H…

蓝桥杯(3.3)

1208. 翻硬币 import java.util.Scanner;public class Main {public static void turn(char[] a,int i) {if(a[i] *) a[i] o;else a[i] *;}public static void main(String[] args) {Scanner sc new Scanner(System.in);char[] a sc.next().toCharArray();char[] b sc.n…

python如何设置虚拟环境|方法有哪几种

原文连接&#xff1a; python设置虚拟环境- Python学习导航 为什么需要虚拟环境&#xff1f; 在使用Python语言时&#xff0c;通过pip&#xff08;pip3&#xff09;来安装第三方包&#xff0c;但是由于pip的特性&#xff0c;系统中只能安装每个包的一个版本。但是在实际项目开…

c++之旅——第三弹

大家好啊&#xff0c;这里是c之旅第三弹&#xff0c;跟随我的步伐来开始这一篇的学习吧&#xff01; 如果有知识性错误&#xff0c;欢迎各位指正&#xff01;&#xff01;一起加油&#xff01;&#xff01; 创作不易&#xff0c;希望大家多多支持哦&#xff01; 一.命名空间;…

项目设计:基于Qt和百度AI的车牌识别系统(嵌入式ARM)

基于Qt和百度AI智能云实现的智能车牌识别系统&#xff0c;具体可实现为停车场管理系统、智能计费停车系统…等。 1.系统实现思路及框架 1.1实现思路 要实现一个车牌识别系统&#xff0c;有多种方法&#xff0c;例如用opencv图像算法实现&#xff0c;或用第三方算法接口&#x…

输出梯形 C语言

解析&#xff1a;这个输出图形的题就是一个找规律加数学计算&#xff0c;我们发现每行比上一行多两个*&#xff0c;最后一行的*表达式为h&#xff08;h-1&#xff09;*2&#xff0c;即3*h-2&#xff0c;那么每一行就是一个先输出最后一行&#xff0d;当前行*个数个空格&#xf…

pytorch 图像数据集管理

目录 1.数据集的管理说明 2.数据集Dataset类说明 3.图像分类常用的类 ImageFolder 1.数据集的管理说明 pytorch使用Dataset来管理训练和测试数据集&#xff0c;前文说过 torchvision.datasets.MNIST 这些 torchvision.datasets里面的数据集都是继承Dataset而来&#xff0c…

【Qt】QTextEdit/QPlainTextEdit 实现 Tab 键多行缩进与反缩进

【Qt】QTextEdit/QPlainTextEdit 实现 Tab 键多行缩进与反缩进 文章目录 I - 主要原理II - 代码实现2.1 - 自定义类2.2 - 实现 Tab 缩进2.3 - 实现反缩进III - 参考链接I - 主要原理 由于 QTextEdit 和 QPlainTextEdit ,都无法实现多行选中缩进与反缩进,选中多行后,按下缩进…

[Redis]——Redis命令手册set、list、sortedset

&#x1f333;List类型常见命令 LPUSH / RPUSH [KEY] [element] …… 向列表左侧或者右侧插入一个或多个元素 LPOP / RPOP [key] 删除左边或者右边第一个元素 LRANGE [key] start end 返回索引start到end的元素&#xff08;索引从0开始&#xff09; BLPOP / BRPOP [key] [等…

【C++】类的默认成员函数(上)

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 一、默认成员函数二、构造函数构造函数的概念及特性 三、析构函数析构函数的特性…

续简单学生管理系统、包装类--day18

Day18 一、删除的思考题 思考题&#xff1a;删除功能可以省略第一步吗&#xff1f;不可以 有第一步判断学生信息合法性&#xff0c;如果信息不合法会直接结束返回 如果没有第一步&#xff0c;将会在第二步判断是否有该学生query循环匹配查找&#xff0c;数据量大情况&#xff…

蓝桥杯倒计时 43天 - 前缀和,单调栈

最大数组和 算法思路&#xff1a;利用前缀和化简 for 循环将 n^2 简化成 nn&#xff0c;以空间换时间。枚举每个 m&#xff0c;m是删除最小两个数&#xff0c;那k-m就是删除最大数&#xff0c;m<k&#xff0c;求和最大的值。暴力就是枚举 m-O(n)&#xff0c;计算前 n-(k-m)的…

PCSA时钟控制集成之时钟门控级别

这一部分描述了&#xff1a; • 时钟门控的级别。 • 实现最大效果的时钟门位置。 • 实现有效和高效时钟门控的集成方法。 时钟树是由时钟缓冲器构建的&#xff0c;这些缓冲器在时钟源&#xff08;时钟输入或PLL&#xff09;与时钟终端&#xff08;寄存器或RAM&#xff09…