前端按钮动画

2024-03-02 17:12
文章标签 前端 frontend 动画 按钮

本文主要是介绍前端按钮动画,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

代码示例

<!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.chinasem.cn/article/766863

相关文章

前端开发攻略---实现与ChatGPT同款光标闪烁打字效果。

1、演示 2、实现代码 <!DOCTYPE html><html lang="ch-ZN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scal

【简单介绍下PostCSS】

🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步! 🌈目录 🌈前言🌈核心功能🌈工作原理🌈常用插件 🌈前言 🔥PostCSS是一个由插件构成的工具,用于使用JavaScript转换CSS代码,它的

react 进阶必学 hook (四):自定义hook

系列文章传送门: react 进阶必学 hook (一):useState 来一碗大碗宽面 react 进阶必学 hook (二):useEffect 专治不吃宽面 react 进阶必学 hook (三):useContext 面馆分店开张了 react 进阶必学 hook (四):自定义hook react 进阶必学 hook (五):额外的hook 什么是自定义hook 官网原话

react 进阶必学 hook (二):useEffect 专治不吃宽面

系列文章传送门: react 进阶必学 hook (一):useState 来一碗大碗宽面 react 进阶必学 hook (二):useEffect 专治不吃宽面 react 进阶必学 hook (三):useContext 面馆分店开张了 react 进阶必学 hook (四):自定义hook react 进阶必学 hook (五):额外的hook 在理解useEffect之前我们

react 进阶必学 hook (一):useState 来一碗大碗宽面

系列文章传送门: react 进阶必学 hook (一):useState 来一碗大碗宽面 react 进阶必学 hook (二):useEffect 专治不吃宽面 react 进阶必学 hook (三):useContext 面馆分店开张了 react 进阶必学 hook (四):自定义hook react 进阶必学 hook (五):额外的hook 什么是hook Hook是

Spring WebFlux + React搭建后台管理系统(10):配合Redis进行鉴权

如果是网关等服务,可以将路由及每个路由的权限缓存到redis数据库中,用户访问,在网关进行鉴权: token比对redis缓存的token,不存在返回token进行jwt解析,获取roles通过api的path和访问模式在redis数据库中获取该接口通行的rolestoken中的roles和api对应的roles有相交说明有权限,否则返回roles同时通过ReactiveSecurityCont

Spring WebFlux + React搭建后台管理系统(8):通过access鉴权

不得不说umi这个access功能还是比较实用的,现在鉴权的逻辑写起来要方便的多。我们可以通过access轻松实现很多功能: 通过不同权限展示不同的菜单在组建中展示不同的内容对写入功能进行限制 做一个简单的实践,下面是三个用户不同权限,以及不同权限能达到的目的: 用户权限功能ffzsadmin可以查看所有内容包括权限,修改人等,以及添加用户,修改用户,删除用户dzit可以看到部分用户信息,

Spring WebFlux + React搭建后台管理系统(7): 实现excel文件上传下载

后台管理系统的excel导出功能,以及使用excel进行批量导入都是必不可少的功能,本篇主要介绍内容如下: java后端 excel的读写excel类型判断以及通过反射适配class后端接收upload服务逻辑实现后端download服务逻辑前端upload组建使用前端download配置 先上效果图: 1. 读取Excel文件 1.1 添加依赖 通过使用poi进行excel文件的

Spring WebFlux + React搭建后台管理系统(6): 使用faker获取测试数据

由于测试没有数据,一个一个写的话太麻烦了,这是我们可以使用faker伪造测试数据,之前用写爬虫的时候经常用来生成user-agent,查了一些java也有类似的库: implementation 'com.github.javafaker:javafaker:0.17.2' 通过爬虫获取图像地址通过faker编写生成SysUser类的对象通过编写一个faker数据的controller,ge

vue 3 中i18n字符串 转义问题

文章目录 前言原因分析解决方案1. 特殊字符的转义2. 占位符与变量插值3. HTML标记4. 多行字符串 前言 本地没有问题,打包就有问题,最后排查是i18n问题,这里记录下 原因分析 特殊符号被误解析:某些特殊符号可能在字符串解析时被特殊处理,比如在某些上下文中@可能被看作是一个指令或者特殊标记。 编码或转义问题:如果特殊字符没有被正确地转义,它们可能在解析时导致错