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

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

news 2026/5/17 20:19:11

简言

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

实现思路

实现步骤如下：

  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

用Python和OpenCV手把手教你搞定自动驾驶图像坐标系转换（附NuScenes数据集实战代码）

用Python和OpenCV手把手教你搞定自动驾驶图像坐标系转换&#xff08;附NuScenes数据集实战代码&#xff09; 自动驾驶技术的核心在于让车辆"看懂"周围环境&#xff0c;而坐标系转换正是连接物理世界与数字世界的桥梁。想象一下&#xff0c;当一辆自动驾驶汽车行驶在…...

编程新知 2026/5/17 10:57:32

未来之窗昭和仙君(九十四)用户指引自助教学源码—东方仙盟

软件教学引导功能说明书未来之窗昭和仙君 - cyberwin_fairyalliance_webquery一、功能概述软件教学引导功能主要用于为用户提供软件操作的引导&#xff0c;通过一系列步骤逐步引导用户完成软件的重要操作。该功能会创建遮罩层、高亮框和提示框&#xff0c;引导用户点击特定元素…...

编程新知 2026/5/17 5:11:10

开源PCB自动布线神器FreeRouting：5分钟上手，效率提升300%

开源PCB自动布线神器FreeRouting&#xff1a;5分钟上手&#xff0c;效率提升300% 【免费下载链接】freerouting Advanced PCB auto-router 项目地址: https://gitcode.com/gh_mirrors/fr/freerouting FreeRouting是一款功能强大的开源PCB自动布线工具&#xff0c;它能帮…...

编程新知 2026/5/17 5:00:17

无代码物联网实战：基于ESP32与WipperSnapper的泳池水温监测方案

1. 项目概述&#xff1a;告别繁琐编程&#xff0c;用无代码方案守护泳池水温又到了打理泳池的季节&#xff0c;除了常规的清洁和化学平衡&#xff0c;水温其实是个挺关键的指标。水温不仅影响游泳的舒适度&#xff0c;也关系到泳池加热设备的能耗和泳池化学品的反应速率。以前想…...

编程新知 2026/5/17 4:31:35

Faderwave合成器：用16个推子实时绘制波形，打造硬件交互式音色

1. 项目概述&#xff1a;用16个推子“画”出你的声音如果你玩过合成器&#xff0c;肯定知道波形是声音的基石。正弦波的纯净、方波的硬朗、锯齿波的锋利&#xff0c;每一种经典波形都定义了合成器音色的灵魂。但你是否想过&#xff0c;如果能像画家调色一样&#xff0c;亲手“绘…...

编程新知 2026/5/17 2:47:40

AI智能体记忆框架：向量化存储与混合检索技术解析

1. 项目概述&#xff1a;一个面向AI智能体的记忆与检索框架最近在折腾AI应用开发&#xff0c;特别是智能体&#xff08;Agent&#xff09;方向&#xff0c;发现一个挺有意思的痛点&#xff1a;如何让智能体拥有“记忆”&#xff1f;不是那种简单的对话历史记录&#xff0c;而是…...

编程新知 2026/5/17 2:39:01

RK3288嵌入式开发实战：硬件架构、软件定制与典型应用场景解析

1. 项目概述&#xff1a;为什么RK3288至今仍是嵌入式开发的“硬通货”&#xff1f; 在嵌入式开发这个行当里&#xff0c;选型是个技术活&#xff0c;更是个经验活。你既要考虑当下的性能需求&#xff0c;又要掂量未来的扩展可能&#xff0c;还得平衡成本、功耗和开发周期。从业…...

编程新知 2026/5/17 1:11:19

AI驱动Figma设计自动化：Claude插件实现自然语言到UI生成

1. 项目概述&#xff1a;当设计工具遇上AI助手最近在和一些资深UI/UX设计师朋友交流时&#xff0c;大家不约而同地提到了一个痛点&#xff1a;在Figma这类设计工具里&#xff0c;从概念到高保真原型的转化过程&#xff0c;依然充满了大量重复、机械的劳动。比如&#xff0c;我需…...

编程新知 2026/5/17 0:46:12

AI与人类共创：从替代焦虑到协作闭环

GPT-Image 2 与人类创造力的共生&#xff1a;从“替代焦虑”到“协作闭环”&#xff08;2026 研究视角与可落地实践&#xff09;当 GPT-Image 2 这样的多模态生成/理解模型进入创作流程后&#xff0c;“竞争还是协作”立刻变成一个绕不开的讨论。直觉上&#xff0c;大家会把它理…...

编程新知 2026/5/17 0:44:06

基于RP2350与CircuitPython的音乐可视化器DIY：从FFT到复古美学

1. 项目概述&#xff1a;从复古情怀到现代DIY如果你和我一样&#xff0c;对上世纪七八十年代那些充满未来感的电子设备抱有某种执念&#xff0c;那么Atari Video Music这个名字一定不会陌生。这台诞生于1977年的设备&#xff0c;堪称音乐可视化器的鼻祖&#xff0c;它通过简单的…...

编程新知 2026/5/17 0:38:54