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

embedded/2024/11/12 13:43:07/

效果:

源码:

javascript"><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.ppmy.cn/embedded/136494.html

相关文章

RAGulator:如何识别和缓解大模型所谓的“忠实幻觉”

RAGulator&#xff0c;一个轻量级的、用于检测RAG系统中语义上与上下文不符&#xff08;OOC&#xff09;的LLM生成文本的检测器 论文链接:https://arxiv.org/abs/2411.03920 论文概述 实时检测大型语言模型&#xff08;LLM&#xff09;生成的与上下文不符的输出问题&#xff…

ECCV2024新鲜出炉!动态再训练-更新用于无源目标检测的Mean Teacher

原文标题:Dynamic Retraining-Updating Mean Teacher for Source-Free Object Detection 中文标题:动态再训练-更新用于无源目标检测的Mean Teacher 想要快速了解这篇文章的可以看这篇分享: 论文速读:动态再训练-更新用于无源目标检测的Mean Teacher(ECCV2024)-CSDN博客

【数学二】线性代数-矩阵-初等变换、初等矩阵

考试要求 1、理解矩阵的概念,了解单位矩阵、数量矩阵、对角矩阵、三角矩阵、对称矩阵、反对称矩阵和正交矩阵以及它们的性质. 2、掌握矩阵的线性运算、乘法、转置以及它们的运算规律,了解方阵的幂与方阵乘积的行列式的性质. 3、理解逆矩阵的概念,掌握逆矩阵的性质以及矩阵可…

大模型微调技术 --> 脉络

Step1:脉络 微调技术从最早期的全模型微调演变成如今的各种参数高效微调(PEFT)方法&#xff0c;背后是为了应对大模型中的计算、存储和数据适应性的挑战 1.为什么有微调&#xff1f; 深度学习模型越来越大&#xff0c;尤其是 NLP 中的预训练语言模型(BERT, GPT)系列。如果从…

ArcGIS Pro SDK (二十三)实时要素类

ArcGIS Pro SDK (二十三)实时要素类 文章目录 ArcGIS Pro SDK (二十三)实时要素类1 从实时数据存储连接到实时要素类2 检查实时要素类是否可识别轨迹3 从实时要素类获取追踪 ID 字段4 订阅流数据5 搜索现有数据并订阅流数据6 搜索和订阅取消环境:Visual Studio 2022 + .NE…

软考中级 软件设计师 上午考试内容笔记(个人向)Part.1

软考上午考试内容 1. 计算机系统 计算机硬件通过高/低电平来模拟1/0信息&#xff1b;【p进制】&#xff1a; K n K n − 1 . . . K 2 K 1 K 0 K − 1 K − 2... K − m K n r n . . . K 1 r 1 K 0 r 0 K − 1 r − 1 . . . K − m r − m K_nK_{n-1}...K_2K_1K_0K…

【p2p、分布式,区块链笔记 Torrent】WebTorrent的add和seed函数

在【p2p、分布式&#xff0c;区块链笔记 Torrent】WebTorrent的上传和下载界面的示例中&#xff0c;主要通过WebTorrent类的add和seed函数实现相关功能。这两个函数都返回一个Torrent类对象的实例。 seed函数 import createTorrent, { parseInput } from create-torrent // &…

vxe-grid ,增加新行,并且定位到新增的行

1、先上个图&#xff1a; 点增了新增&#xff0c;则自动将滚动条滚动最底部。 2、代码&#xff1a; let $table tableRef.value;if ($table) {(async () > {const { row: newRow, rows: newRows } await $table.insertAt({demo: ,usertype: ,},-1,);$table.scrollToRow(n…