鼠标hover过渡动画(已验证)

在这里插入图片描述
基于css中的grid方案实现的一个hover小动画,以下代码基于vue2,其他的可以直接复制html和css就可以,注意:以下代码在部分浏览器不兼容
注:部分代码来自我接入的GPT4o/Claude网站

<template><div class="hoverbtn"><div class="btns">hoverme</div><div class="detail"><div class="content"><div class="inner">测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA <br />测试hover过渡动画AAAAAAAAAAAAA</div></div></div></div>
</template><style scoped>
.btns {width: 100px;height: 40px;background: #19be6b;
}
.hoverbtn {width: 100px;line-height: 40px;border-radius: 8px;color: #fff;font-size: 18px;margin: 40px auto;
}
.detail {display: grid;grid-template-rows: 0fr;transition: 0.5s;font-size: 14px;
}
.hoverbtn:hover .detail {grid-template-rows: 1fr;
}
.content {width: 300px;overflow-y: hidden;line-height: 1.5;background: #2454ff;
}
</style>

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

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

相关文章

全国各地身份证号开头6位数字及地区对照表

具体请前往&#xff1a;全国各地身份证号开头6位数字-省市县/区对照表

数据库中的主码、候选码、主属性、非主属性

参考链接 候选码、主码、全码、外码、主属性、主键、主关键字、非主属性清晰总结 - 知乎 (zhihu.com) 1.码&#xff1a; 能够标识一条记录的属性或者属性集 2.候选码 能够标识一条记录的最小属性集 任一候选键的任何真子集都不能唯一标识一个记录&#xff08;比如在成绩表…

用Python爬虫制作一个简易翻译器

我们通常是通过requestsBS4的方法来获取网页内容&#xff0c;这种方法导入模块较多&#xff0c;速度相对有点儿慢&#xff0c;此时我们可以用requests的post方法向指定服务器发送请求&#xff0c;获取数据后格式化为json&#xff0c;然后获取相关键值。这种方法用到了requests和…

shell学习3---for循环

for循环格式 基本格式 for 变量名称(注意是名称不是变量$等) [ in 名称范围 ] (可以不写) do 执行内容 &#xff08;若满足循环则做什么动作&#xff09; done &#xff08;for循环结束标志&#xff09; 名称范围是字符 [rootserver1 ~]# ./for…

google vr 入门之VrPanoramaView制作全景图列表(1)

展示图片的列表我这里使用RecycleView&#xff0c;activity_main.xml <?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android“http://schemas.android.com/apk/res/android” xmlns:tools“http://schemas.android.com/tool…

【orin-nx Linux下创建简单C++项目 CMake构建编译系统】

【注意】&#xff1a;需要安装gcc 和 cmake 安装视频 #.sh 文件添加权限 chmod x cmake-3.30.3-linux-aarch64.sh1、在root下创建一个文件夹testaubo 2、在testaubo文件夹下创建5个文件夹以及一个cmake文件 2.1、【src】 文件夹存放C的 .cpp文件2.2、【include】 文件夹存…

【Unity错误】No cloud project ID was found by the Analytics SDK

在编译默认的URP 2D项目时&#xff0c;出现这样一个错误&#xff1a;No cloud project ID was found by the Analytics SDK. This means Analytics events will not be sent. Please make sure to link your cloud project in the Unity editor to fix this problem. 原因&…

深入理解TCP三次握手

在网络通信中&#xff0c;TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是一个可靠的、面向连接的协议&#xff0c;它保证了数据包的顺序和完整性。为了建立一个稳定的连接&#xff0c;TCP 使用了一个被称为 三次握手&#xff08;Three-W…

C#中的Graphics类和SetQuality()自定义方法

在 C# 中&#xff0c;Graphics 类是 System.Drawing 命名空间的一部分&#xff0c;它提供了一组方法和属性&#xff0c;用于在 Windows Forms 应用程序中进行二维绘图。Graphics 对象可以绘制文本、线条、曲线、形状和图像&#xff0c;并可以对它们进行变换和剪辑。 Graphics …

FTP、SFTP安装,整合Springboot教程

文章目录 前言一、FTP、SFTP是什么&#xff1f;1.FTP2.SFTP 二、安装FTP1.安装vsftp服务2.启动服务并设置开机自启动3.开放防火墙和SELinux4.创建用户和FTP目录4.修改vsftpd.conf文件5.启动FTP服务6.问题 二、安装SFTP总结 前言 在一般项目开发工程中&#xff0c;我们大多数会…

JavaWeb案例-登录认证

在前面的文章中&#xff0c;我们复习了部门管理、员工管理的基本功能。但是我们并没有登录&#xff0c;就直接访问到了Tilias智能辅助系统的后台。这是不安全的&#xff0c;所以今天复习登录认证。最终实现的效果就是用户必须登录之后&#xff0c;才可以访问后台系统中的功能。…

git cz 规范化 git commit 格式

git cz 规范化 git commit 格式 npm install git-cz --save-devnpm install commitizen --save-devnpm install cz-customizable --save-dev // 这是package.json自动生成的 "config": {"commitizen": {"path": "./node_modules/cz-custo…

文件对比工具--BeyondCompare

&#x1f496;简介 Beyond Compare 是一款功能强大的文件和文件夹比较工具&#xff0c;由Scooter Software开发。它可以帮助用户轻松地比较文件和文件夹的差异&#xff0c;并且可以合并变化、同步文件以及备份重要数据 &#x1f4bb;环境 windows &#x1f4d6;版本 Beyon…

from T2I to T2V

生成图片 在Stable Diffusion推理过程中&#xff0c;其使用unet对一个初始化的向量不断去噪&#xff0c;并编入条件信息 c c c &#xff0c;最后使用vae-decoder将其上采样为一张图片。 计算过程&#xff1a; f l a t e n t u n e t ( f l a t e n t ) , f l a t e n t ∈ R…

k8s环境搭建

创建一个新的model虚拟机&#xff0c;处理器为2&#xff0c;硬盘为40G 使用model主机克隆三台新的主机&#xff0c;名称分别为k8s_master&#xff0c;k8s_node01&#xff0c;k8s_node02&#xff0c;运行环境脚本&#xff0c;设置ip地址和名称&#xff0c;IP地址分别为66、77、…

webpack5 创建多页面应用配置

简单版webpack创建多页面应用&#xff0c;只要把配置文件复制下来&#xff0c;然后npm安装相应插件&#xff0c;正常是能跑起来了 创建 初始化 npm init生成package.json文件安装webpack npm i -D webpack webpack-cli webpack-dev-server创建main.js入口文件和webpack.config…

Spring Cloud之二 微服务注册

1&#xff1a;Intellij 新建服务 user-service 2&#xff1a;pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"…

当 PLC 遇见 “IT”

IT&OT 深度融合工控人加入PLC工业自动化精英社群 IT & OT integration 当今不断发展的工业自动化世界&#xff0c;在智能、高效和快速的系统和软件应用中&#xff0c;数据扮演着越来越重要的角色。传统的 IT 网络中&#xff0c;提供了丰富多彩的规范和协议&#xff0…

kitti数据深度图转点云坐标计算方法与教程(代码实现)

文章目录 前言一、kitti深度图官网介绍1、官网深度图介绍2、深度图读取官网代码(python)3、深度图解读1、数据格式内容2、深度图加工3、深度图转相机坐标深度二、kitti数据内参P矩阵解读1、P2矩阵举例2、内参矩阵 (3x3)3、特殊平移向量(第4列)4、kitti的bx与by解释三、kitti深…

使用Redis实现记录访问次数(三种方案)

目录 0. 前言1. 使用Filter实现2. 使用AOP实现 1. 导入依赖 2. 写一个切面类&#xff0c;实现统计访问次数。 3. 开启AOP 4. 测试 5. plus版本 (1) 新建一个bean类 (2) 新增一个controller方法 (3) 新增一个循环增强方法 (4) 测试…