CSS 文字弹跳效果

请添加图片描述

鼠标移过去 会加快速度

<template><div class="bounce"><p class="text" :style="{animationDuration: animationDuration}">欢迎使用UniApp Vue3!</p></div>
</template><script>
export default {name: 'Bounce',data() {return {animationDuration: '0.5s',};},mounted() {this.$el.querySelector('.text').addEventListener('mouseover', () => {this.animationDuration = '0.2s';});this.$el.querySelector('.text').addEventListener('mouseout', () => {this.animationDuration = '0.5s';});},
};
</script><style scoped>
.bounce {display: flex;justify-content: center;align-items: center;height: 100vh;
}.text {font-size: 24px;font-weight: bold;color: #333;animation: bounce 1s infinite;
}@keyframes bounce {0% {transform: translateY(0);}50% {transform: translateY(-30px);}100% {transform: translateY(0);}
}
</style>

教学视频地址

点击跳转教学视频

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

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

相关文章

ArcGIS渔网的多种用法

在ArcGIS中有一个渔网工具&#xff0c;顾名思义&#xff0c;可以用来创建包含由矩形像元所组成网络的要素类。不太起眼&#xff0c;但它的用途却有很多&#xff0c;今天跟大家分享一篇关于渔网的多种用途。 1.马赛克地图制作 2.基于网格的设施密度统计制作马赛克地图 准备材…

牙齿敏感困扰?试试清九野小红盾牙膏

随着冬季的来临&#xff0c;许多人可能会面临牙齿敏感的问题。在这个时候&#xff0c;食用冷饮都会让牙齿感到非常酸痛。一般来说&#xff0c;不良的饮食习惯和不正确的刷牙方式&#xff0c;都会导致牙齿敏感&#xff0c;但根本还是牙本质小管的暴露和空洞&#xff0c;需要修复…

家校互通小程序实战开发02首页搭建

目录 1 创建应用2 搭建首页总结 我们上一篇介绍了家校互通小程序的需求&#xff0c;创建了对应的数据源。有了这个基础的分析之后&#xff0c;我们就可以进入到开发阶段了。开发小程序&#xff0c;先需要创建应用。 1 创建应用 登录控制台&#xff0c;点击创建应用&#xff0c…

[c]统计数字

题目描述 某次科研调查时得到了n个自然数&#xff0c;每个数均不超过1500000000&#xff08;1.5*109&#xff09;。已知不相同的数不超过10000个&#xff0c;现在需要统计这些自然数各自出现的次数&#xff0c;并按照自然数从小到大的顺序输出统计结果。 输入描述: 第1行是整数…

Linux阶段性项目——FTP服务器

一、FTP服务概述 ​FTP为File Transfer Protocol的缩写&#xff0c;即文件传输协议&#xff0c;是TCP/IP 协议族中的协议之一。FTP是一个用于在计算机网络上在客户端和服务器之间进行文件传输的应用层协议。RFC 959定义了FTP协议规范。是互联网上使用的最广泛的文件传输协议&a…

File Inclusion(Pikachu)

File Inclusion(local) 这里随便点击一个提交 观察url&#xff0c;显示是一个文件file1.php 可以直接通过url修改这个文件 找到自己的文件&#xff08;本地文件&#xff09;shell.php的路径写上去 就可以看到 File Inclusion&#xff08;remote&#xff09; 提交的是一个目标…

大带宽服务器怎么选

大带宽服务器怎么选 在选择时&#xff0c;需要考虑的因素包括&#xff1a;   - 业务需求&#xff1a;不同的业务类型对服务器的性能要求不同。例如&#xff0c;文件和数据库服务器、邮件服务器、web服务器、多媒体服务器、终端服务器的需求就各不相同。   - 成本&#xff1…

C#教程(四):多态

1、介绍 1.1 什么是多态 在C#中&#xff0c;多态性&#xff08;Polymorphism&#xff09;是面向对象编程中的一个重要概念&#xff0c;它允许不同类的对象对同一消息做出响应&#xff0c;即同一个方法可以在不同的对象上产生不同的行为。C#中的多态性可以通过以下几种方式实现…

JVM基础篇---02

为什么需要用户自定义类加载器&#xff1a; 扩展类加载器的功能&#xff1a; Java的默认类加载器主要有三个&#xff0c;分别是引导类加载器、扩展类加载器和应用程序类加载器。其中&#xff0c;引导类加载器和扩展类加载器是由JVM实现的&#xff0c;用户无法修改其行为。而应用…

促进家校沟通的方法有哪些

“家校沟通是教育中的重要一环&#xff0c;它可以帮助教师和家长更好地了解和关心孩子&#xff0c;共同促进孩子的健康成长。但是&#xff0c;在实际操作中&#xff0c;如何才能有效地促进家校沟通呢&#xff1f; 定期家长会&#xff1a;每个学期开始和结束时&#xff0c;以及期…

【Unity6.0+AI】Sentis加载模型识别手写数字案例实现

按照国际惯例,看效果: 素材准备: 自己在PS中绘制黑底白字手写字体,导出jpg,尺寸28*28! 素材设置 基本步骤 准备工作:从 ONNX Model Zoo 下载手写识别 ONNX 模型文件 【下载模型】MNIST 手写数字识别模型 mnist-12.onnx,并将其拖入项目窗口的 Assets 文件夹。 【下载模…

vue根据身份证获取年龄/生日/性别,根据年龄获取生日,根据生日获取年龄

首先根据身份证获取年龄/生日/性别 handleBlur(data) {let idCard data.target.value;let sex null;let birth null;let myDate new Date();let month myDate.getMonth() 1;let day myDate.getDate();let age 0;if (idCard.length 18) {age myDate.getFullYear() - i…

每日一题-----逆序字符串

大家好我是Beilef&#xff0c;在一个美好的下午我意外接触到编程并且产生了兴趣&#xff0c;哈哈我要努力成为一个跨界者&#xff0c;让我们一起加油吧O(∩_∩)O 文章目录 目录 文章目录 前言 大家好请上车 一、逆序字符串 题⽬描述&#xff1a; 输⼊⼀个字符串&#xff0c;写…

7.7、kali linux环境下搭建DVWA

目录 一、资料下载准备工作 1.1、DVWA源代码下载 二、开启Apache、mysql服务 2.1、下载Apache2文件 2.2、开启Apache2服务 方法一&#xff1a;开启Apache2服务&#xff08;手动&#xff09; 方法二&#xff1a;开启Apache2服务&#xff08;系统自启动&#xff09; 2.3、…

量子密码学简介

量子密码学&#xff08;英语&#xff1a;Quantum cryptography&#xff09;泛指利用量子力学的特性来加密的科学。量子密码学最著名的例子是量子密钥分发&#xff0c;而量子密钥分发提供了通信两方安全传递密钥的方法&#xff0c;且该方法的安全性可被信息论所证明。目前所使用…

blackbox黑盒监控部署(k8s内)tensuns专用

一、前言 部署在k8s中需要用到deployment、configmap、service服务 二、部署 创建存放yaml的目录 mkdir /opt/blackbox-exporter && cd /opt/blackbox-exporter 编辑blackbox配置文件&#xff0c;使用configmap挂在这 vi configmap.yaml apiVersion: v1 kind: Confi…

连续时间LQR和离散时间LQR笔记

文章目录 连续时间LQR理解离散时间LQR理解参考资料 本文是根据下面参考资料里的1和2对应的讲座内容所做的笔记 连续时间LQR理解 假设一个系统可以被表示为如下形式的状态方程&#xff1a; x ˙ A x B u ( 1.1 ) \dot{x} Ax Bu \qquad \qquad (1.1) x˙AxBu(1.1) 式中的 x…

C#与VisionPro联合编程

C#与VisionPro联合 1. 参照康耐视提供的样例2. 参照样例写一个1. 创建工程2. 添加引用3. 声明变量4. 初始化5. 刷新队列6. 用户数据获取7. 跨线程访问Windows控件--委托8. 显示图像9. 释放资源 3. 代码4. 资源下载 1. 参照康耐视提供的样例 C:\Program Files\Cognex\VisionPro…

详解Java多线程、线程池及线程同步(synchronized关键字、悲观锁、乐观锁)——通俗易懂版!!!

1.进程与线程定义 进程包含线程&#xff0c;如一个百度网盘进程&#xff0c;该进程的线程可以有上传&#xff0c;下载。 2.创建线程的三种方式 方式1-继承Thread类 方式2-实现Runnabled接口 1.常规写法 2.匿名内部类写法 方式3-实现Callable接口 示例代码&#xff1a; f1.get…

CAD objectArx 在操作mfc时出现“不支持尝试执行的操作“

问题原因&#xff1a; ARX中对话框通常继承自CAcUiDialog&#xff0c;CAcUiDialog 构造函数有个参数 HINSTANCE hInstance&#xff0c;默认为 NULL&#xff0c;指定了对话框资源所在DLL进程。如果没有指定该参数&#xff0c;在创建对话框&#xff08;DoModal或Create&#xff…