使用Vue实现点击页面触发特效

news2024/11/14 5:45:50

 效果描述 

在页面上的指定区域内进行点击,则会在页面上显示设置好的随机文本,此文本出现后会执行动画,动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转,最后消失。

效果展示

完整代码

<template>
  <div ref="container" class="box" @click="handleRandom">
    <span
      :key="childKey"
      ref="child"
      :style="{ color: colorRandom(), left: childLeft, top: childTop }"
      class="minbox"
    >
      {{ msg }}
    </span>
  </div>
</template>

<script setup>
import { ref } from "vue";
const container = ref(null);
const child = ref(null); // 鼠标点击后,在页面展示文本的节点
const childKey = ref(0); // 每次点击后,改变key以触发Vue重新渲染span
// 生成随机颜色
const colorRandom = () => {
  let color;
  do {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    color = `rgb(${r},${g},${b})`;
  } while (color === "rgb(250,235,215)"); // 检查颜色是否是我们不想要的
  return color;
};
const textArr = [
  "( ^∀^)",
  "富强",
  "Σ(゚д゚;)",
  "民主",
  "(⊙o⊙)",
  "文明",
  "✈",
  "和谐",
  "☯",
  "自由",
  "☠",
  "平等",
  "〠",
  "公正",
  "❤",
  "法治",
  "爱国",
  "★",
  "敬业",
  "诚信",
  "友善",
];
// 生成随机数
const randomInd = () => {
  return Math.floor(Math.random() * textArr.length);
};
const msg = ref(null); //在页面展示的文本
const childLeft = ref(0);
const childTop = ref(0);
// 鼠标点击事件
const handleRandom = (e) => {
  childLeft.value = e.clientX + "px";
  childTop.value = e.clientY + "px";
  msg.value = textArr[randomInd()];
  // 在每次点击后,改变key以触发Vue重新渲染span
  childKey.value++;
};
</script>

<style lang="scss" scoped>
.box {
  width: 500px;
  height: 300px;
  cursor: pointer;
  background-color: rgb(250, 235, 215);
  .minbox {
    width: fit-content;
    position: absolute;
    animation: moveAndFadeout 1s ease-in-out forwards;
  }
  // 移动和、淡出以及翻转动画
  @keyframes moveAndFadeout {
    0% {
      transform: translate(0, 0) scale(1) rotate(0deg);
      opacit: 1;
    }
    100% {
      transform: translate(20px, -80px) rotate(180deg) scale(2);
      opacity: 0;
    }
  }
}
</style>

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

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

相关文章

Windows 11 Visual Studio 2022 cmake 3.29 CUDA12.5 构建VTK

The Visualization Toolkit (VTK)是一个用于操作和展示科学数据的开源软件&#xff0c;包括了二三维渲染功能。 下载VTK 从官网Download | VTK下载VTK版本&#xff0c;我下载的是9.3.1源代码&#xff0c;在Windows 11上安装。 CMake构建VTK的VS2022工程 生成与安装 分别生成De…

AI智能名片小程序:跨界融合,重塑品牌与顾客的“三度情缘”

在这个信息爆炸、竞争白热化的时代&#xff0c;品牌如何突破重围&#xff0c;与顾客建立超越常规的情感链接&#xff1f;答案或许就藏在那个看似不起眼&#xff0c;实则暗藏玄机的AI智能名片小程序里&#xff01;它不仅是技术的结晶&#xff0c;更是品牌与顾客之间“三度情缘”…

Redis持久化(AOF和RDB)

目录 前言 一.RDB 1.1手动执行 1.2自动执行 二.AOF 2.1重写机制 三.混合持久化 Redis的学习专栏&#xff1a;http://t.csdnimg.cn/a8cvV 前言 持久化&#xff0c;在之前&#xff0c;我们接触这个词汇是在mysql数据库当中的事务四大特性里。 持久性&#xff1a;指一旦事…

探索免费隧道服务:为本地开发提供自定义子域名的解决方案

目录 引言 使用Ngrok进行本地开发 免费替代方案 Localtunnel Serveo Ngrok付费计划&#xff08;有限的免费试用&#xff09; 开源替代方案 SISH 总结 引言 在Web开发中&#xff0c;将本地服务器暴露给互联网进行测试或演示是常见需求。Ngrok等工具因其便捷性而广受欢迎…

【LeetCode】分隔链表

目录 一、题目二、解法完整代码 一、题目 给你一个链表的头节点 head 和一个特定值 x &#xff0c;请你对链表进行分隔&#xff0c;使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前。 你应当 保留 两个分区中每个节点的初始相对位置。 示例 1&#xff1a; 输入&a…

等保-Linux等保测评

等保-Linux等保测评 1.查看相应文件&#xff0c;账户xiaoming的密码设定多久过期 rootdengbap:~# chage -l xiaoming Last password change : password must be changed Password expires : pass…

day5 分布式节点

文章目录 1 流程回顾2 抽象 PeerPicker3 节点选择与 HTTP 客户端4 实现主流程5 main 函数测试。6 QA 本文代码地址&#xff1a; 本文是7天用Go从零实现分布式缓存GeeCache的第五篇。 注册节点(Register Peers)&#xff0c;借助一致性哈希算法选择节点。实现 HTTP 客户端&…

OpenGL-ES 学习(7) ---- VBO EBO 和 VAO

目录 VBO(Vertex Buffer Object)EBO(Element Buffer Object)VAO(Vertex Array Object) VBO(Vertex Buffer Object) EBO(Element Buffer Object) VBO(Vertex Buffer Object) 实际是指顶点缓冲器对象 在 opengl-es 2.0 的编程中&#xff0c;用于绘制图元的顶点数据是从 CPU 传…

LoadRunner-Vugen脚本使用教程

1 使用VuGen录制脚本 1.1新建脚本和解决方案 &#xff08;1&#xff09;打开VuGen&#xff0c;单击【File】→【New Script and Solution】创建项目&#xff0c;弹出Create a New Script对话框。 左侧栏是协议分类&#xff0c;每项含义如下所示&#xff1a; ● Single Pro…

数字通云平台 智慧政务OA PayslipUser SQL注入漏洞复现

0x01 产品简介 数字通云平台智慧政务OA产品是基于云计算、大数据、人工智能等先进技术,为政府部门量身定制的智能化办公系统。该系统旨在提高政府部门的办公效率、协同能力和信息资源共享水平,推动电子政务向更高层次发展。 0x02 漏洞概述 数字通云平台 智慧政务OA Paysli…

pytorch学习(六)transforms使用

1.Transforms可以对训练图像进行预处理&#xff0c;以提高模型的稳定性&#xff0c;提高泛化能力。其中包含&#xff1a; 中心裁剪、数据标准化、缩放、裁剪、旋转、仿射、反转、填充、噪声添加、灰度变换、线性变换、亮度饱和度以及对比度变换等。 所处理的图像用tensorboard…

【iOS】APP仿写——网易云音乐

网易云音乐 启动页发现定时器控制轮播图UIButtonConfiguration 发现换头像 我的总结 启动页 这里我的启动页是使用Xcode自带的启动功能&#xff0c;将图片放置在LaunchScreen中即可。这里也可以通过定时器控制&#xff0c;来实现启动的效果 效果图&#xff1a; 这里放一篇大…

基于视觉工具箱和背景差法的行人检测,行走轨迹跟踪,人员行走习惯统计matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 在三维图中&#xff0c;幅度越大&#xff0c;则表示人员更习惯的行走路线。 2.算法运行软件版本 matlab2022a 3.部分核…

【Nacos】Nacos服务注册与发现 心跳检测机制源码解析

在前两篇文章&#xff0c;介绍了springboot的自动配置原理&#xff0c;而nacos的服务注册就依赖自动配置原理。 Nacos Nacos核心功能点 服务注册 :Nacos Client会通过发送REST请求的方式向Nacos Server注册自己的服务&#xff0c;提供自身的元数据&#xff0c;比如ip地址、端…

【C语言】深入解析希尔排序

文章目录 什么是希尔排序&#xff1f;希尔排序的基本实现代码解释希尔排序的优化希尔排序的性能分析希尔排序的实际应用结论 在C语言编程中&#xff0c;希尔排序是一种高效的排序算法&#xff0c;是插入排序的一种更高效的改进版本。它通过比较相距一定间隔的元素来进行排序&am…

JRT报告打印设计

检验报告单打印一直是个难点问题&#xff0c;JRT开发时候重点考虑了简化检验报告打印&#xff0c;首先采用脚本化方便快速修改报告。然后打印基础解决难点问题&#xff0c;基于JRT打印就可以简化到本文代码的水平&#xff0c;维护方便&#xff0c;结构清晰&#xff0c;上线修改…

【1】Spring Cloud 工程搭建

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f525;个人专栏&#xff1a;Spring学习之路&#x1f4d5;格言&#xff1a;吾愚多不敏&#xff0c;而愿加学欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 1. 父子工程创建 1.1 创建父工程 1.2 创建子项目 重点关注Spring C…

头发稀疏治疗笔记

1. 前言 今天去中南医院看了一下“头发稀疏”的病症&#xff1b; 2. 头皮检测 2.1 毛发光镜检查 2.2 皮肤镜影像

root的安卓12系统上,如何使apk获得root或者高级别的系统权限?

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…

JVM--经典的垃圾收集器

1. 垃圾收集器的概念 定义 ; 如果说收集算法是内存回收的方法论&#xff0c;那垃圾收集器就是内存回收的实践者。《Java虚拟机规 范》中对垃圾收集器应该如何实现并没有做出任何规定&#xff0c;因此不同的厂商、不同版本的虚拟机所包含 的垃圾收集器都可能会有很大差别…