CSS 纵向顶部往下动画

<template><div class="container" @mouseenter="startAnimation" @mouseleave="stopAnimation"><!-- 旋方块 --><div class="box" :class="{ 'scale-up-ver-top': 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;}.scale-up-ver-top {-webkit-animation: scale-up-ver-top 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;animation: scale-up-ver-top 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}@-webkit-keyframes scale-up-ver-top {0% {-webkit-transform: scaleY(0.4);transform: scaleY(0.4);-webkit-transform-origin: 100% 0%;transform-origin: 100% 0%;}100% {-webkit-transform: scaleY(1);transform: scaleY(1);-webkit-transform-origin: 100% 0%;transform-origin: 100% 0%;}}@keyframes scale-up-ver-top {0% {-webkit-transform: scaleY(0.4);transform: scaleY(0.4);-webkit-transform-origin: 100% 0%;transform-origin: 100% 0%;}100% {-webkit-transform: scaleY(1);transform: scaleY(1);-webkit-transform-origin: 100% 0%;transform-origin: 100% 0%;}}</style>
教学视频地址
点击跳转教学视频
相关文章:
CSS 纵向顶部往下动画
<template><div class"container" mouseenter"startAnimation" mouseleave"stopAnimation"><!-- 旋方块 --><div class"box" :class"{ scale-up-ver-top: isAnimating }"><!-- 元素内容 -->&…...
科普:敏捷估算为什么用斐波那契数列
被一个同学问:敏捷估算为什么用斐波那契数列?有什么意义? 简单说说我自己的简介: 敏捷开发中使用斐波那契数列来估算的原因是,斐波那契数列可以用于估算任务的难度级别,并帮助团队预测完成任务所需的时间…...
HarmonyOS资源分类与访问
资源分类与访问 应用开发过程中,经常需要用到颜色、字体、间距、图片等资源,在不同的设备或配置中,这些资源的值可能不同。 应用资源:借助资源文件能力,开发者在应用中自定义资源,自行管理这些资源在不同…...
message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogra
第一步:修改 project.config.json 文件 "packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}], "packNpmManually": true 第二步:…...
基于C#的机械臂欧拉角与旋转矩阵转换
欧拉角概述 机器人末端执行器姿态描述方法主要有四种:旋转矩阵法、欧拉角法、等效轴角法和四元数法。所以,欧拉角是描述机械臂末端姿态的重要方法之一。 关于欧拉角的历史,由来已久,莱昂哈德欧拉用欧拉角来描述刚体在三维欧几里…...
【百度前端三面面试题】
在某乎看到的《百度前端三面面试题全部公开,三面的最后一个问题令我窒息》 其中下面三个问题没有给出答案,我虽然是前端出身,但也面试过一些人,大概分析一下这些问题。 面试中问这几个问题的目的是什么 ,怎么回答 上…...
【Java面试题】HTTP与 HTTPS 的区别
HTTP 与 HTTPS 的区别 : 主要体现在三个方面,分别是 信息传输安全、证书和身份验证 、连接方式 信息传输安全: HTTP 是超文本传输协议,HTTP下的信息是明文传输的,因此使用HTTP协议可能导致信息被截获或者第三方恶意…...
vue3 v-model语法糖
vue2 中父子组件数据同步 父→子 子→父 如何实现? v-model“count” 或者 xxx.sync“msg” v-model 语法糖 完整写法 :value“count” 和 input“count$event” xxx.sync 语法糖 完整写法 :xxx“msg” 和 update:xxx“msg$event” 现在:一个 v-mo…...
【k8s】deamonset文件和说明
目录 deamonset的相关命令 deamonset的定义 deamonset的使用场景 deamonset的例子 deamonset字段说明 serviceAccountName DaemonSet的结构及其各个部分的作用 deamonset的相关命令 #查看<name-space>空间内有哪些deamonset kubectl get DaemonSet -n <na…...
Zookeeper-Zookeeper特性与节点数据类型详解
1.Zookeeper介绍 ZooKeeper 是一个开源的分布式协调框架,是Apache Hadoop 的一个子项目,主要用来解决分布式集群中应用系统的一致性问题。Zookeeper 的设计目标是将那些复杂目容易出错的分布式一致性服务封装起来,构成一高效可靠的原语集&…...
云计算复习提纲
第一章 大数据的概念:海量数据的规模巨大到无法通过目前主流的计算机系统在合理时间内获取、存储、管理、处理并提炼以帮助使用者决策 大数据的特点:①数据量大,存储的数据量巨大,PB级别是常态;②多样,数…...
Vue-响应式数据
一、ref创建基本类型的响应式数据 vue3可以使用ref、reactive去定义响应式数数据。 知识点汇总 使用ref需要先引入ref,import {ref} from vue在模板 template 中使用了添加ref 的响应式数据,变量的后面不用添加.value所有js代码里面,去操作r…...
Vue开发者必备!手把手教你实现类似Element Plus的全局提示组件!
前言 在Web开发中,用户体验至关重要。有效的信息提示和错误消息对于确保用户更好地理解和操作至关重要。在这个背景下,全局弹框提示组件成为了一个非常有用的工具。Vue.js,作为当前最受欢迎的前端框架之一,为创建灵活、可复用的弹…...
大数据 - Hadoop系列《三》- HDFS(分布式文件系统)概述
🐶5.1 hdfs的概念 HDFS分布式文件系统,全称为:Hadoop Distributed File System。 它是一个文件系统,用于存储文件,通过目录树来定位文件;其次,它是分布式的,由很多服务器联合起来实现其功能,集…...
Golang标准库sync的使用
Go语言作为现代编程语言,其并发编程的优势是有目共睹的。在实际编程中,我们常常需要保证多个goroutine之间的同步,这就需要使用到Go语言的sync标准库。sync库提供了基本的同步原语,例如互斥锁(Mutex)和等待…...
判断两张图片是否完全一致
判断两张图片是否为完全相同的图片 批量判断尺寸 大小 图像展示内容体是否完全一致的图片 import os import hashlib from PIL import Imagedef check_img_repeat(directory):"""批量对图片进行重复性校验是检查一组图像中是否有相同或几乎相同的图像副本。一…...
2024洗地机哪家强?口碑洗地机推荐
现如今,智能家电在人们生活中变得越来越受欢迎,例如智能洗地机的出现,不仅省时省力,还实现了家务清洁的自由。在家庭中,地面清洁一直是一个令人头疼的问题,各种智能家居品牌通过开发各种智能家电产品来解决…...
k8s的资源管理
命令行: kubectl命令行工具优点: 90%以上的场景都可以满足 对资源的增,删,查比较方便,对改不是很友好缺点:命令比较冗长,复杂难记 声明方式:k8s当中的yaml文件实现资源管理----声明式GUI:图形化工具的管理。 查看k8s的…...
docker应用部署(部署MySql,部署Tomcat,部署Nginx,部署Redis)
Docker 应用部署 一、部署MySQL 搜索mysql镜像 docker search mysql拉取mysql镜像 docker pull mysql:5.6创建容器,设置端口映射、目录映射 # 在/root目录下创建mysql目录用于存储mysql数据信息 mkdir ~/mysql cd ~/mysqldocker run -id \ -p 3307:3306 \ --na…...
非常好用的ocr图片文字识别技术,识别图片中的文字
目录 一.配置环境 二.应用 2.1常见图片识别 2.2排版简单的印刷体截图图片识别 2.3竖排文字识别 2.4英文识别 2.5繁体中文识别 2.6单行文字的图片识别 三.参考 一.配置环境 pip3 install cnocr -i https://pypi.tuna.tsinghua.edu.cn/simple pip3 install onnxruntime…...
如何快速实现Font Awesome图标字体文件格式转换:终极在线工具指南
如何快速实现Font Awesome图标字体文件格式转换:终极在线工具指南 【免费下载链接】Font-Awesome The iconic SVG, font, and CSS toolkit 项目地址: https://gitcode.com/GitHub_Trending/fo/Font-Awesome Font Awesome作为一款标志性的SVG、字体和CSS工具包…...
手把手调试Android触摸反馈:用Systrace和日志追踪小圆点显示的全过程
Android触摸反馈调试实战:从Systrace到Logcat的全链路追踪 在移动应用开发中,触摸反馈的准确性和即时性直接影响用户体验。当用户手指接触屏幕时,那个跟随指尖跳动的小圆点看似简单,背后却隐藏着复杂的系统级交互。本文将带你深入…...
计算机网络 之 【自定义协议、序列化与反序列化】(C++使用JSON示例)
目录 1.自定义协议与序列化/反序列化 2.Json简介 Json是什么 第三方库提供,使用时包含头文件 JSON 的数据类型 JSON结构示例 C使用JSON示例 1.自定义协议与序列化/反序列化 协议的必要性 协议是通信双方的约定,它定义了数据的格式和含义ÿ…...
突破3大技术瓶颈:抖音音乐批量下载工具的创新解决方案
突破3大技术瓶颈:抖音音乐批量下载工具的创新解决方案 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 在数字内容创作领域,音频素材的获取与管理已成为制约生产力的关键因素。特别是当…...
SEO_2024年最新SEO趋势分析与实战策略解读
<h1 id"2024seo">2024年最新SEO趋势分析与实战策略解读</h1> <p>在数字营销的快速发展中,搜索引擎优化(SEO)作为提升网站流量的重要手段,一直备受关注。2024年,SEO领域再度发生了一些重要…...
Kafka连接报错?手把手教你解决localhost:9092不可用问题(附真实案例)
Kafka连接报错?手把手教你解决localhost:9092不可用问题(附真实案例) 当你第一次尝试在本地环境运行Kafka生产者时,看到"Connection to node -1 (localhost/127.0.0.1:9092) could not be established"这样的报错信息&a…...
Sodaq_RN2483库详解:LoRaWAN Class A终端嵌入式实现
1. Sodaq_RN2483库深度解析:面向Class A LoRaWAN终端的嵌入式通信实现 1.1 库定位与工程价值 Sodaq_RN2483是一个专为Microchip RN2483 LoRaWAN模块设计的Arduino兼容C库,其核心目标是为资源受限的嵌入式系统提供稳定、可复用、符合LoRaWAN协议规范的无…...
终极免费Jable视频下载指南:3步搞定Chrome插件完整教程
终极免费Jable视频下载指南:3步搞定Chrome插件完整教程 【免费下载链接】jable-download 方便下载jable的小工具 项目地址: https://gitcode.com/gh_mirrors/ja/jable-download jable-download是一款专为普通用户设计的免费Jable视频下载工具,通过…...
从预处理指令看跨语言兼容:手把手封装C++库供C调用的5个关键步骤
从预处理指令看跨语言兼容:手把手封装C库供C调用的5个关键步骤 在嵌入式开发和SDK设计中,经常需要将C库封装成C语言接口。这种跨语言调用看似简单,实则暗藏玄机。本文将深入剖析extern "C"和__cplusplus预处理指令的底层原理&#…...
移动端视频适配难题:xgplayer的CSS全屏模式实战指南(含16:9与9:16适配技巧)
移动端视频适配难题:xgplayer的CSS全屏模式实战指南(含16:9与9:16适配技巧) 在移动端视频播放场景中,屏幕比例适配一直是开发者面临的棘手问题。传统全屏模式在处理非常规比例视频(如竖屏9:16内容)时往往表…...
