Vue3中实现原生CSS完成圆形按钮点击粒子效果和定点旋转动画

效果:

源码:

<script setup>
import { ElMessage } from "element-plus";
const isClick = () => {ElMessage.success('Clicked');
};
</script><template><button @click="isClick" class="button"><el-icon><Refresh /></el-icon></button>
</template><style scoped>
.button {display: inline-block;background-color: #07c160;color: #fff;border-radius: 4px;border: none;cursor: pointer;position: relative;box-shadow: 0 2px 25px rgba(233, 30, 99, 0.5);outline: 0;transition: transform ease-in 0.1s, background-color ease-in 0.1s, box-shadow ease-in 0.25s;width: 24px;height: 24px;border-radius: 12px;left:15px;top:15px;padding: 3px;animation: tada 1s;
}.button::before {position: absolute;content: '';left: -2em;right: -2em;top: -2em;bottom: -2em;pointer-events: none;transition: ease-in-out .5s;background-repeat: no-repeat;background-image: radial-gradient(circle, #03ebf3 20%, transparent 20%),radial-gradient(circle, #03ebf3 20%, transparent 20%),radial-gradient(circle, #03ebf3 20%, transparent 20%),radial-gradient(circle, #03ebf3 20%, transparent 20%),radial-gradient(circle, #03ebf3 20%, transparent 20%),radial-gradient(circle, #03ebf3 20%, transparent 20%),radial-gradient(circle, #03ebf3 20%, transparent 20%),radial-gradient(circle, #03ebf3 20%, transparent 20%),radial-gradient(circle, #03ebf3 20%, transparent 20%),radial-gradient(circle, #03ebf3 20%, transparent 20%),radial-gradient(circle, #03ebf3 20%, transparent 20%),radial-gradient(circle, #03ebf3 20%, transparent 20%),radial-gradient(circle, #03ebf3 20%, transparent 20%),radial-gradient(circle, #03ebf3 20%, transparent 20%);background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%,15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%, 65% 30%, 80% 32%, 15% 60%,83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%, 64% 70%, 80% 71%;animation: bubbles ease-in-out .75s forwards;
}.button:active {transform: scale(0.95);background-color: #03ebf3;box-shadow: 0 2px 25px rgba(233, 30, 99, 0.5);
}.button:active::before {animation: none;background-size: 0;
}/* 动画效果 */
@keyframes tada {from {transform: scale3d(1, 1, 1);}10%, 20% {transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg);}30%, 50%, 70%, 90% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg);}40%, 60%, 80% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg);}to {transform: scale3d(1, 1, 1);}
}@keyframes bubbles {0% {background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%, 65% 30%, 80% 32%, 15% 60%,83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%, 64% 70%, 80% 71%;}50% {background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%, 75% 0%, 95% -2%, 0% 80%,95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%, 68% 96%, 95% 100%;}100% {background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%, 100% -2%, -5% 80%,100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%, 100% 100%;background-size: 0% 0%;}
}
</style>

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

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

相关文章

DGL之copy_e和copy_u

消息函数copy_e和copy_u用法 copy_e语法格式例子 copy_u语法格式例子 copy_e 语法格式 dgl.function.copy_e(e, out)参数&#xff1a; e (str)&#xff1a;边的特征字段&#xff0c;指定用于计算消息的边特征。out (str)&#xff1a;输出的消息字段&#xff0c;指定存储消息…

python画图|hist()函数深层体验

【1】引言 前述学习已经掌握hist()函数的基本运用技巧&#xff0c;可通过下述链接直达&#xff1a; python画图|hist()函数画直方图初探-CSDN博客 python画图|hist()函数画直方图进阶-CSDN博客 我们已经理解hist()函数本质上画的是概率分布图&#xff0c;相关知识属于数理统…

如何提升论文写作能力?

很多同学刚开始都不知道如何写作学术论文&#xff0c;这个也很正常&#xff0c;否则要导师来做什么。而且写作是需要练习的,等你写了5篇以上的论文&#xff0c;你就有感觉了。其次&#xff0c;你们感觉论文写作不知道从何下手还有个重要原因是缺少指导&#xff0c;最近接触了几…

配置管理,雪崩问题分析,sentinel的使用

目录 配置管理一&#xff1a;什么是配置管理二&#xff1a;配置共享三&#xff1a;配置热更新 雪崩问题一&#xff1a;原因分析二&#xff1a;解决方案 Sentinel一&#xff1a;快速入门二&#xff1a;请求限流三&#xff1a;线程隔离四&#xff1a;fallback五&#xff1a;服务熔…

算法练习:904. 水果成篮

题目链接&#xff1a;904. 水果成篮。 题目意思就是可以选取两个种类的水果不能超过两个种类&#xff0c;该种类个数没有限制&#xff0c; 但是一旦超过两个种类的水果就要停止计数。 示例中数组编号就是就是种类&#xff0c;就是不能出现三个不同编号的数。 1.暴力解法&…

邮件营销模板定制服务:满足个性营销需求!

邮件营销模板创建步骤&#xff1f;外贸营销邮件范文模板有哪些&#xff1f; 为了在众多邮件中脱颖而出&#xff0c;企业需要定制化的邮件营销模板&#xff0c;以更好地传达品牌信息&#xff0c;提升客户参与度。MailBing将探讨邮件营销模板定制服务的重要性&#xff0c;并介绍…

unity 镜面 反射

URP 镜面 资源绑定 下载 namespace UnityEngine.Rendering.Universal { [ExecuteInEditMode]public class PlanarURP : MonoBehaviour{public bool VR false;public int ReflectionTexResolution 512;public float Offset 0.0f;[Range(0, 1)]public float Reflecti…

细说STM32单片机USART中断收发RTC实时时间并改善其鲁棒性的另一种方法

目录 一、工程目的 1、目标 2、通讯协议及应对错误指令的处理目标 二、工程设置 三、程序改进 四、下载与调试 1、合规的指令 2、不以#开头&#xff0c;但以&#xff1b;结束&#xff0c;长度不限 3、以#开头&#xff0c;不以;结束&#xff0c;也不包含;&#xff0c;长…

leetcode 2043.简易银行系统

1.题目要求: 示例: 输入&#xff1a; ["Bank", "withdraw", "transfer", "deposit", "transfer", "withdraw"] [[[10, 100, 20, 50, 30]], [3, 10], [5, 1, 20], [5, 20], [3, 4, 15], [10, 50]] 输出&#xff…

软件技术求职简历「优选篇」

【#软件技术简历#】一份精心撰写的简历是增加获得心仪职位的机会。那么&#xff0c;如何才能写出一份既全面又吸引人的软件技术简历呢&#xff1f;以下是幻主简历整理的软件技术简历「优选篇」&#xff0c;欢迎大家阅读收藏&#xff01; 软件技术简历范文&#xff1a; 求职意向…

GESP4级考试语法知识(算法概论(三))

爱因斯坦的阶梯代码&#xff1a; //算法1-12 #include<iostream> using namespace std; int main() {int n1; //n为所设的阶梯数while(!((n%21)&&(n%32)&&(n%54)&&(n%65)&&(n%70)))n; //判别是否满足一组同余式cout<<n<…

Perforce《2024游戏技术现状报告》Part2:游戏引擎、版本控制、IDE及项目管理等多种开发工具的应用分析

游戏开发者一直处于创新前沿。他们的实践、工具和技术受到各行各业的广泛关注&#xff0c;正在改变着组织进行数字创作的方式。 近期&#xff0c;Perforce发布了《2024游戏技术现状报告》&#xff0c;通过收集来自游戏、媒体与娱乐、汽车和制造业等高增长行业的从业者、管理人…

美国历任总统特征数据-多个字段(1789-2024年)

数据简介&#xff1a;美国历任总统数据集是一个涵盖了从美国建国以来所有总统的详细信息的综合性数据集。该数据集不仅包含了每位总统的基本信息&#xff08;如姓名、任期、党派等&#xff09;&#xff0c;还涵盖了他们在任期间的重要政策、经济指标、国内外事件等关键数据。通…

视频QoE测量学习笔记(二)

A Survey on Bitrate Adaptation Schemes for Streaming Media Over HTTP论文学习笔记 自适应比特率&#xff08;ABH或ABS&#xff09; 是一种旨在通过 HTTP 网络有效地流式传输文件的技术。向用户的视频播放器提供多个相同内容、不同大小文件的文件&#xff0c;然后客户端选…

HTML 基础标签——文本内容标签 <ul>、<ol>、<blockquote> 、<code> 等标签的用法详解

文章目录 1. 标题标签2. 段落标签3. 文本格式化标签4. 列表标签4.1 无序列表 `<ul>`4.2 有序列表 `<ol>`5. 引用标签5.1 块引用 `<blockquote>`5.2 行内引用 `<q>`5.3 作品引用 `<cite>`6. 代码和预格式文本标签6.1 代码标签 `<code>`6.2 …

论文阅读笔记-Get To The Point: Summarization with Pointer-Generator Networks

前言 最近看2021ACL的文章&#xff0c;碰到了Copying Mechanism和Coverage mechanism两种技巧&#xff0c;甚是感兴趣的翻阅了原文进行阅读&#xff0c;Copying Mechanism的模型CopyNet已经进行阅读并写了阅读笔记&#xff0c;如下&#xff1a; 论文阅读笔记&#xff1a;Copyi…

PDF多功能工具箱 PDF Shaper v14.6

如今对PDF处理的软件很多都是只是单一的功能。PDF Shaper给你完全不同的体验&#xff0c;因为PDF Shaper是一款免费的PDF工具集合的软件。有了PDF Shaper&#xff0c;你以后再也不用下载其他处理PDF的软件了。PDF Shaper的功能有&#xff1a;合并&#xff0c;分割&#xff0c;加…

【算法】(Python)贪心算法

贪心算法&#xff1a; 又称贪婪算法&#xff0c;greedy algorithm。贪心地追求局部最优解&#xff0c;即每一步当前状态下最优选择。试图通过各局部最优解达到最终全局最优解。但不从整体最优上考虑&#xff0c;不一定全局最优解。步骤&#xff1a;从初始状态拆分成一步一步的…

vue常见题型(1-10)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 2.2双向绑定的原理是什么vue框架采用的是数据双向绑定的方式&#xff0c;由三个重要部分构成2.2.1.ViewModel2.2.2 双向绑定2.2.3.1.编译Compile2.2.3.2.依赖收集 3…

论文阅读:人工智能赋能源网荷储协同互动的应用及展望

论文阅读&#xff1a;人工智能赋能源网荷储协同互动的应用及展望 [1]王继业.人工智能赋能源网荷储协同互动的应用及展望[J].中国电机工程学报,2022,42(21):7667-7682.DOI:10.13334/j.0258-8013.pcsee.220538. 文章目录 论文阅读&#xff1a;人工智能赋能源网荷储协同互动的应用…