当前位置： 首页 > news >正文

【css】使用css实现提示框各种弹出效果。

news 2026/2/9 14:23:03

简言

最近工作编写页面时，需要有一个提示框从下到上弹出的效果。
冥想了一下，实现了出来。
记录下实现思路。

实现思路

实现步骤如下：

  1. 编写样式。
    首页要有承载内容的容器（box)。外层在套一个包装盒子（用来进行定位和样式定义）。
    在这里插入图片描述
  2. 触发弹出效果逻辑。
    我这里是鼠标移上去，显示内容，触发弹出效果。实际应用时可能是其他触发方式。
  3. 弹出效果的实现。
    利用css的transition和transform实现
  4. 封装成组件。
    可以把相关属性或关键操作提出来，封装成可配置的组件。

编写样式 和触发逻辑

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wrapper {position: relative;min-width: 10px;min-height: 10px;width: 400px;height: 200px;min-height: 10px;margin-left: calc(50% - 100px);margin-top: 100px;border-radius: 50px 20px 50px 20px;background-color: skyblue;}.box {position: absolute;top: 0;left: 0;display: block;width: 100%;height: 100%;cursor: pointer;border-radius: inherit;background-color: #666;}.wrapper:hover .box {transform: translate(0, 0);}</style>
</head><body><div class="wrapper"><div class="box">文字显示区域巴拉巴拉。。。</div></div>
</body></html>

鼠标移上去触发弹出效果。
在这里插入图片描述

设计弹出效果

弹出效果利用css的transition和transform实现。
transform对显示内容盒子（box）进行变换。
transition 让变换呈现动画效果。
例如：
先默认让box往下移高100%和往右移宽100%;
鼠标移入时，再回到原位置。

.box{
transform: translate(100%, 100%);
transition: 0.5s ease all;
}
.wrapper:hover .box {transform: translate(0, 0);}

效果则是 显示内容区域从右下往右上弹出效果：

请添加图片描述
wrapper去掉背景色，并且添加overflow: hidden;后效果：
请添加图片描述

封装成组件

可以把触发方式、transform弹出效果、transition动画样式、时长等等关键属性提出来，封装成可配置的组件。
赶快试试吧。

结语

完整代码。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wrapper {position: relative;min-width: 10px;min-height: 10px;width: 400px;height: 200px;min-height: 10px;margin-left: calc(50% - 100px);margin-top: 100px;border-radius: 50px 20px 50px 20px;/* background-color: skyblue; */overflow: hidden;}.box {position: absolute;top: 0;left: 0;display: block;width: 100%;height: 100%;transform: translate(100%, 100%);transition: 0.5s ease all;cursor: pointer;border-radius: inherit;background-color: #666;}.wrapper:hover .box {transform: translate(0, 0);}</style>
</head><body><div class="wrapper"><div class="box">文字显示区域巴拉巴拉。。。</div></div>
</body></html>

相关文章：

【css】使用css实现提示框各种弹出效果。

简言 最近工作编写页面时&#xff0c;需要有一个提示框从下到上弹出的效果。 冥想了一下&#xff0c;实现了出来。 记录下实现思路。 实现思路 实现步骤如下&#xff1a; 编写样式。 首页要有承载内容的容器&#xff08;box)。外层在套一个包装盒子&#xff08;用来进行定位…...

编程日记 2023/4/22 12:54:22

1685_Excel的几种脚本处理方式

全部学习汇总&#xff1a; GreyZhang/python_basic: My learning notes about python. (github.com) 做个小结&#xff0c;实际上是写的我自己学习的过程。 关于Excel的处理方式很多&#xff0c;我也不会那么多&#xff0c;在这里我只想写一下我自己接触过的。大致是三种方式&a…...

编程日记 2023/4/22 12:49:20

Unity中使用struct和class来存储数据的注意事项

在 Unity 中&#xff0c;struct 和 class 都是用来定义自定义类型的关键字。它们的主要区别在于如何存储和传递它们的实例。 特点structclass存储方式值类型引用类型默认构造函数自动有性能快慢可空性不可空可空继承单继承单继承或多重继承 一、相似之处 1、都是用来定义自定…...

编程日记 2023/4/22 12:44:17

共阳(共阴)LED数码管编码交互演示

LED数码管原理 LED数码管有两大类&#xff0c;一类是共阴极接法&#xff0c;另一类是共阳极接法&#xff0c;共阴极就是各段的显示字码共用一个电源的负极&#xff0c;是高电平点亮&#xff0c;共阳极就是各段的显示字码共用一个电源的正极&#xff0c;是低电平点亮。只要控制…...

编程日记 2023/5/30 6:00:11

如何在 TensorFlow 中使用 GPU 加速深度学习计算？

一、前言 TensorFlow 是由 Google 开源的深度学习框架，它具有易用、高效、灵活等特点，被广泛应用于学术界和工业界中。而 GPU 是一种高性能的计算设备，可以加速深度学习的计算过程。本文将介绍如何在 TensorFlow 中使用 GPU 加速深度学习计算。 二、安装 TensorFlow 安装…...

编程日记 2023/5/31 1:36:40

RK3568平台开发系列讲解（Linux系统篇）线程 pthread 详解

🚀返回专栏总目录 文章目录 一、POSIX 线程模型二、pthread_create()创建线程三、线程属性3.1、初始化线程对象属性3.2、销毁一个线程属性对象3.3、线程的分离状态3.4、线程的调度策略3.5、线程的优先级3.6、线程栈四、线程退出五、回收已终止线程的资源沉淀、分享、成长，让…...

编程日记 2023/4/22 12:29:13

hspJAVA

循序渐进学Java 零基础 -韩顺平 第 1 章 内容介绍 1 1.1 本套 JAVA 课程内容 1 1.1.1 课程的三个阶段 1 1.1.2 关于课程的说明 1 1.1.3 课程特色 2 1.2 JAVA 就业方向 2 1.3 JAVA 开发场景举例 1-SSM 3 1.4 JAVA 开发场景举例 2&#xff1a;ANDROID 核心代码 3 1.5 JAVA 开发场…...

编程日记 2023/5/29 20:32:44

OpenAI-ChatGPT最新官方接口《嵌入向量式文本转换》全网最详细中英文实用指南和教程，助你零基础快速轻松掌握全新技术（五）（附源码）

Embeddings 嵌入向量式文本转换 前言Overview 概述What are embeddings? 什么是嵌入&#xff1f;How to get embeddings 如何获取嵌入python代码示例cURL代码示例 Embedding models 嵌入模型Second-generation models 第二代模型First-generation models (not recommended) 第…...

编程日记 2023/4/22 12:19:11

1042. 不邻接植花

有 n 个花园&#xff0c;按从 1 到 n 标记。另有数组 paths &#xff0c;其中 paths[i] [xi, yi] 描述了花园 xi 到花园 yi 的双向路径。在每个花园中&#xff0c;你打算种下四种花之一。 另外&#xff0c;所有花园 最多 有 3 条路径可以进入或离开. 你需要为每个花园选择一…...

编程日记 2023/4/22 12:14:09

Linux FTP服务

FTP服务 作用 传输文件 端口 FTP服务器默认使用TCP协议的20、21端口与客户端进行通信 20端口用于建立数据连接&#xff0c;并传输文件数据 21端口用于建立控制连接&#xff0c;并传输FTP控制命令 模式 FTP数据连接分为主动模式和被动模式 主动模式&#xff1a;客户端告诉服务端…...

编程日记 2023/4/22 12:09:08

JavaScript基础入门全解析（下）

数据类型&#xff08;重点&#xff09; ●是指我们存储在内存中的数据的分类&#xff0c;为了方便数据的管理&#xff0c;将数据分成了不同的类型 ●我们通常分为两大类 基本数据类型 和 复杂数据类型&#xff08;引用数据类型&#xff09; 基本数据类型 ●在js中基本数据类…...

编程日记 2023/4/22 12:04:07

【C++初阶】（入门）输入输出

#include< iostream> std是C标准库的命名空间名&#xff0c;C将标准库的定义实现都放到这个命名空间中 文章目录 ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨&#x1f47b;一、iostream库介绍&#x1f47b;二、使用总结 ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ &#x1f4…...

编程日记 2023/5/31 1:38:13

初识Linux+Linux基本指令(一)

目录 一.&#x1f606;计算机与操作系统&#x1f606; 计算机与操作系统发展史简介: 计算机与操作系统的关系: 二.&#x1f604;Linux操作系统&#x1f604; 开源软件的代名词:Linux 非图形化界面的Liunx 三.&#x1f606;Linux基本指令之文件管理篇&#x1f606; 1.操…...

编程日记 2023/4/22 11:54:04

部署架构 因为单体架构痛点 升级到微服务架构

如图为单体部署 痛点 多人协作可能产生很多的回归测试 代码管理复杂度提升 软件包升级会导致增加测试次数 举例 单体电商 1增加功能(增加小程序平台) 2 并发增加 出现 1 代码复用 2 系统间相互调用 3 接口不仅要对外服务&#xff0c;也得对内提供接口 4 数据分析功…...

编程日记 2023/5/31 1:39:47

mapreduce打包提交执行wordcount案例

文章目录 一、源代码1. WordCountMapper类2. WordCountReducer类3. WordCountDriver类4. pom.xml 二、相关操作和配置1. 项目打包2. 带参测试3. 上传打包后的jar包和测试文档4. 增大虚拟内存5.启动集群6.在hdfs上创建输入文件夹和上传测试文档Hello.txt7. 利用jar包在hdfs实现文…...

编程日记 2023/4/22 11:44:02

MyBatis（十六）MyBatis使用PageHelper

一、limit分页 mysql的limit后面两个数字&#xff1a; 第一个数字&#xff1a;startIndex&#xff08;起始下标。下标从0开始。&#xff09; 第二个数字&#xff1a;pageSize&#xff08;每页显示的记录条数&#xff09; 假设已知页码pageNum&#xff0c;还有每页显示的记录…...

编程日记 2023/4/22 11:39:01

铁路轨道不平顺数据分析与预测

铁路轨道不平顺数据分析与预测 1.引言 铁路轨道作为铁行车的基础设施&#xff0c;是铁路线路的重要组成部分。随着经济和交通运输业的发展&#xff0c;我国的铁路运输正朝着高速和重载方向迅速发展&#xff0c;与此同时&#xff0c;轨道结构承受来自列车荷载、运行速度的冲击…...

编程日记 2023/5/30 6:01:39

好家伙，9:00面试，9:06就出来了，问的实在是太...

从外包出来&#xff0c;没想到死在另一家厂子 自从加入这家公司&#xff0c;每天都在加班&#xff0c;钱倒是给的不少&#xff0c;所以也就忍了。没想到2月一纸通知&#xff0c;所有人不许加班&#xff0c;薪资直降30%&#xff0c;顿时有吃不起饭的赶脚。 好在有个兄弟内推我去…...

编程日记 2023/4/22 11:28:56

【MySQL】数据库约束和聚合函数的使用

目录 上篇在这里喔~ 1.数据库约束 1.NULL约束 2.UNIQUE唯一约束 3.DEFAULT默认值约束 4.PRIMARY KEY主键约束 5.FOREIGN KEY外键约束 2.表的设计 1.设计思路​编辑 2.固定套路​编辑 2.1一对一关系 2.2一对多关系 ​编辑 2.3多对多关系 ​编辑​编辑​编辑 3.插入…...

编程日记 2023/4/22 11:23:55

SpringMvcFoundation

SpringMvcFoundation 一. SpringMVC简介1.1 优点二.Spring入门案例2.1 导入坐标2.2 编写SpringBoot启动类2.3 编写controller2.4 入门案例工作流程分析2.4.1 启动服务器初始化过程2.4.2 单次请求过程2.5 PostMan简介2.5.1 PostMan基本使用2.6 请求与相应2.6.1 请求映射路径2.6.…...

编程日记 2023/4/22 11:18:54

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2026/2/7 23:18:39

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2026/2/8 15:03:06

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/11/10 15:33:04

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/12/3 20:14:32

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2026/2/7 13:17:38

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/11/9 1:27:18

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2026/1/27 17:31:07