CSS 缩减顶部

<template><!-- @mouseenter="startAnimation" 表示在鼠标进入元素时触发 startAnimation 方法。@mouseleave="stopAnimation" 表示在鼠标离开元素时触发 stopAnimation 方法。 --><!-- 容器元素 --><div class="container" @mouseenter="startAnimation" @mouseleave="stopAnimation"><!-- 方块 --><div class="box" :class="{ 'animate': isAnimating }"><!-- 元素内容 --></div></div>
</template>
<script setup>import {ref} from 'vue';const isAnimating = ref(false); // 控制是否应用动画的响应式状态function startAnimation() {// 鼠标进入容器时,启动动画isAnimating.value = true;}function stopAnimation() {// 鼠标离开容器时,停止动画isAnimating.value = false;}
</script>
<style>.container {/* 定义容器宽度和高度 */width: 100px;height: 100px;margin-top: 50px;margin-left: 40%;}.box {/* 定义方块宽度和高度 */width: 100px;height: 100px;background-color: blue;/* 定义过渡效果 */transition: transform 0.5s;}/* 应用动画类 */.box.animate {-webkit-animation: scale-down-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;animation: scale-down-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}/* 定义动画 */@-webkit-keyframes scale-down-top {0% {-webkit-transform: scale(1);transform: scale(1);-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;}100% {-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;}}@keyframes scale-down-top {0% {-webkit-transform: scale(1);transform: scale(1);-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;}100% {-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;}}</style>

 

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

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

相关文章

通用搜索的工作原理

了解 Google 的通用搜索结果为何如此重要&#xff0c;通用搜索的发展方向&#xff0c;以及它对您意味着什么。 让我们从回答一个显而易见的问题开始&#xff1a; 什么是通用搜索&#xff1f; 网络上有一些通用搜索的定义&#xff0c;但我更喜欢从马的嘴里听到这样的事情。 …

搞懂Vue一篇文章就够了

vue算是小编接触过时间最长的前端框架了&#xff0c;下面来总结一下最实用的知识点&#xff0c;一篇文章从入门到熟练工 目录 一、概念二、常用特性1.拦截器和路由篇1.1 拦截器和路由配置 2.传值篇2.1父子组件互相传值2.2路由跳转传值 3.接口封装3.1 api接口配置 4.组件封装5. …

GO语言工具函数库--Lancet

支持300常用功能的开源GO语言工具函数库–Lancet lancet&#xff08;柳叶刀&#xff09;是一个全面、高效、可复用的go语言工具函数库。lancet受到了java apache common包和lodash.js的启发。 特性 全面、高效、可复用300常用go工具函数&#xff0c;支持string、slice、dateti…

与擎创科技共建一体化“数智”运维体系,实现数字化转型

小窗滴滴小编获取最新版公司简介 前言&#xff1a; 哈喽大家好&#xff0c;最近分享的互联网IT热讯大家都挺喜欢&#xff0c;小编看着数据着实开心&#xff0c;感谢大家支持&#xff0c;小编会继续给大家推送。 新岁即将启封&#xff0c;我们一年一期的运维干货年末大讲也要…

【halcon深度学习】dev_display_dl_data 移植到C# 上篇

效果展示 前言 在研究halcon深度学习的时候,会发现halcon的例程里面用到了大量的二次封装库函数。这些库函数内部也是由基础的算子组成。我们在halcon的开发环境里面用的很爽,但是一旦要在C#中使用,就会报错。 一开始,我想避开这个移植过程,直接使用halcon引擎(HDevEngi…

深入Mybatis数据源

数据源是持久层框架中最核心的组件之一&#xff0c;在实际工作中比较常见的数据源有 C3P0、Apache Common DBCP、Proxool 等。作为一款成熟的持久化框架&#xff0c;MyBatis 不仅自己提供了一套数据源实现&#xff0c;而且还能够方便地集成第三方数据源。 javax.sql.DataSourc…

scala--面向对象(2)

package scala06object scala07_ABSClass {// 抽象属性 抽象方法 def main(args: Array[String]): Unit = { // 抽象类用法 // 实例化子类 val student0 = new Student08 student0.sayHi("lisi")// 直接实例化抽象类(匿名子类) //匿名子类 是多态的一种体现 (父…

C++系列-第1章顺序结构-3-输出类cout

C系列-第1章顺序结构-3-输出类cout 在线练习&#xff1a; http://noi.openjudge.cn/ https://www.luogu.com.cn/ 总结 本文是C系列博客&#xff0c;主要讲述输出类cout的用法 cout介绍与基本用法 在C中&#xff0c;cout 是用于输出&#xff08;打印&#xff09;数据的工具&…

文华财经鬼谷数据期货量化分析系统指标公式

鬼谷数据量化主图源码 安装流程——打开文华财经软件——右上角指标管理器——新建指标——复制源码——安装成功 鬼谷数据主图源码 安装流程——打开文华财经软件——右上角指标管理器——新建指标——复制源码——安装成功文华财经期货软件擒龙量化主图指标公式HH:HHV(HIGH…

系列四、Eureka自我保护

一、Eureka自我保护 1.1、故障现象 保护模式主要用于一组客户端和Eureka Server之间存在网络分区场景下的保护。一旦进入保护模式&#xff0c;Eureka Server将会尝试保护其服务注册表中的信息&#xff0c;不再删除服务注册表中的数据&#xff0c;也就是不会注销任何微服务。如…

交叉编译aarch64架构支持openssl的curl、libcurl

本文档旨在指导读者在x86_64平台上交叉编译curl和openssl库以支持aarch64架构。在开始之前&#xff0c;请确保您的系统环境已正确配置。 1. 系统环境准备 系统是基于Ubuntu 20.04 LTS&#xff0c;高版本可能会有问题。首页&#xff0c;安装必要的开发工具和库文件。打开终端并…

【C++拷贝构造函数】动态分配与成员对象

系列文章目录 &#x1f308;座右铭&#x1f308;&#xff1a;人的一生这么长、你凭什么用短短的几年去衡量自己的一生&#xff01; &#x1f495;个人主页:清灵白羽 漾情天殇_计算机底层原理,深度解析C,自顶向下看Java-CSDN博客 目录 系列文章目录 一、拷贝构造函数是什么&am…

Factory Method工厂模式(对象创建)

Factory Method&#xff08;对象创建&#xff09; 链接&#xff1a;工厂模式实例代码 解析 目的 在软件系统中&#xff0c;经常面临着创建对象的工作&#xff1b;由于需求的变化&#xff0c;需要创建的对象的具体类型经常变化。 如何应对这种变化&#xff1f;如何绕过常规的…

有序数组的平方

给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排序。 示例 1&#xff1a; 输入&#xff1a;nums [-4,-1,0,3,10] 输出&#xff1a;[0,1,9,16,100] 解释&#xff1a;平方后&#xff0c;数组变为 …

Django(四)

1.数据库操作 MySQL数据库 pymysql import pymysql# 1.连接MySQL conn pymysql.connect(host"127.0.0.1", port3306, userroot, passwd"root123", charsetutf8, dbunicom) cursor conn.cursor(cursorpymysql.cursors.DictCursor)# 2.发送指令 cursor.…

707.设计链表

707.设计链表 https://leetcode.cn/problems/design-linked-list/description/ 单链表实现 单链表的创建需要一个头节点&#xff0c;它不存储值但指向第一个元素&#xff0c;便于后续的增删改查操作的实现 注意&#xff1a; 复用 addAtIndex 函数实现添加头尾节点的功能 …

《整机柜服务器通用规范》由OCTC正式发布!浪潮信息牵头编制

近日&#xff0c;中国电子工业标准化技术协会开放计算标准工作委员会&#xff08;OCTC&#xff09;正式批准发布了《整机柜服务器通用规范》&#xff0c;该标准由浪潮信息牵头&#xff0c;中国工商银行、中国质量认证中心、英特尔、中国计量科学研究院等十余家单位联合编制&…

SLAM PnP问题以及相关基础知识

目标泛函 目标泛函是在优化问题中使用的一种数学工具&#xff0c;目标泛函是一个函数&#xff0c;它将一个或多个函数映射到一个实数。它常用于描述需要最小化或最大化的函数。在优化问题中&#xff0c;我们通常希望找到使得某个特定函数取得最大值或最小值的变量值。目标泛函…

鸿蒙开发ArkTS基础学习-开发准备工具配置

文章目录 前言1. 准备工作2.开发文档3.鸿蒙开发路径一.详情介绍二.DevEco Studio安装详解-开发环境搭建2.1配置开发环境欢迎各位读者阅读本文,今天我们将介绍鸿蒙(HarmonyOS)应用开发的入门步骤,特别是在准备工作和开发环境搭建方面的重要信息。本文将对鸿蒙官方网站的关键…

Java—Throwing Exceptions

一、指定方法引发的异常 上一节展示了如何为ListOfNumbers类中的writeList&#xff08;&#xff09;方法编写异常处理程序。有时&#xff0c;代码捕获可能在其中发生的异常是适当的。然而&#xff0c;在其他情况下&#xff0c;最好让调用堆栈更上层的方法处理该异常。例如&…