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

HTML+CSS 文本动画卡片

news 2026/4/1 2:29:02

效果演示

09-文本动画卡片.gif

实现了一个图片叠加文本动画效果的卡片（Card）布局。当鼠标悬停在卡片上时，卡片上的图片会变为半透明，同时显示隐藏在图片上的文本内容，并且文本内容有一个从左到右的渐显动画效果，伴随着一个白色渐变背景的动画效果。

Code

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本动画卡片</title><link rel="stylesheet" href="./09-文本动画卡片.css">
</head><body><div class="container"><div class="card"><img src="images/1.jpg" alt=""><div class="text"><h2>How disciplined you are, how free you are.</h2><p>你有多自律，就有多自由。</p></div></div><div class="card"><img src="images/2.jpg" alt=""><div class="text"><h2>The action to the present, the result to the time.</h2><p>把行动交给现在，把结果交给时间。</p></div></div><div class="card"><img src="images/3.jpg" alt=""><div class="text"><h2>One more point of persistence, one less point of regret.</h2><p>多一分坚持，就会少一分遗憾。</p></div></div></div>
</body></html>

/*   * 设置全局样式，将所有元素的外边距和内边距都设置为0，  * 并设置盒模型为border-box，使得元素的宽度和高度  * 包括内容、内边距和边框，但不包括外边距。  */  
* {  margin: 0;                   /* 清除所有元素的外边距 */  padding: 0;                 /* 清除所有元素的内边距 */  box-sizing: border-box;      /* 设置盒模型为border-box */  
}  /*   * 设置body样式，使其占据整个视口的高度，  * 并使用Flexbox居中显示内容。  * 背景色设置为深灰色。  */  
body {  height: 100vh;               /* 视口高度 */  display: flex;               /* 使用Flexbox布局 */  justify-content: center;     /* 水平居中 */  align-items: center;         /* 垂直居中 */  background-color: #212121;   /* 背景色为深灰色 */  
}  /*   * 容器元素，使用Flexbox布局，允许内容换行。  * 内容在容器中居中显示。  */  
.container {  display: flex;               /* 使用Flexbox布局 */  flex-wrap: wrap;             /* 允许内容换行 */  justify-content: center;     /* 水平居中 */  
}  /*   * 卡片元素的基本样式，包括尺寸、背景色、文字颜色等。  * 设置了溢出隐藏和光标为手形，表示可点击。  * 使用相对定位以便内部元素可以绝对定位。  */  
.card {  width: 310px;                /* 卡片宽度 */  height: 220px;               /* 卡片高度 */  overflow: hidden;            /* 溢出内容隐藏 */  margin: 10px;                /* 外边距 */  background-color: #000;      /* 背景色为黑色 */  color: #fff;                 /* 文字颜色为白色 */  cursor: pointer;             /* 光标为手形，表示可点击 */  position: relative;          /* 相对定位 */  
}  /*   * 卡片内的图片样式，设置图片的尺寸，并添加过渡效果。  */  
.card img {  width: 100%;                 /* 图片宽度为卡片宽度 */  height: 100%;                /* 图片高度为卡片高度 */  transition: 0.35s;           /* 过渡效果持续0.35秒 */  
}  /*   * 卡片内的文本容器样式，绝对定位在卡片内部，  * 并设置了内边距。  */  
.card .text {  position: absolute;          /* 绝对定位 */  top: 30px;                   /* 距离顶部30px */  left: 30px;                  /* 距离左侧30px */  bottom: 30px;                /* 距离底部30px */  right: 30px;                 /* 距离右侧30px */  padding: 0 18px;             /* 左右内边距为18px */  
}  /*   * 文本容器前的伪元素样式，用于制作渐变效果。  * 初始状态为完全透明并位于卡片外部。  */  
.card .text::before {  content: "";                 /* 伪元素内容为空 */  position: absolute;          /* 绝对定位 */  top: 0;                      /* 顶部与文本容器对齐 */  bottom: 0;                   /* 底部与文本容器对齐 */  right: 0;                    /* 初始位置在右侧 */  left: 100%;                  /* 初始位置完全在容器外部 */  border-left: 4px solid rgba(255, 255, 255, 0.8); /* 左侧边框 */  background-color: rgba(255, 255, 255, 0.5);     /* 背景色为半透明白色 */  opacity: 0;                  /* 初始透明度为0，完全透明 */  transition: 0.5s;            /* 过渡效果持续0.5秒 */  transition-delay: 0.6s		   /* 过渡效果开始前有0.6秒的延迟 */  
}  /*   * 卡片文本内的标题和段落样式，初始状态透明度为0，  * 使用了transform进行位置调整，并设置了过渡效果。  */  
.card .text h2,  
.card .text p {  margin-bottom: 6px;          /* 底部外边距为6px */  opacity: 0;                  /* 初始透明度为0 */  transition: 0.35s;           /* 过渡效果持续0.35秒 */  
}  /*   * 卡片文本内的标题样式，使用了transform进行位置调整，  * 字体较轻，文本全部大写，并设置了过渡效果的延迟。  */  
.card .text h2 {  font-weight: 300;            /* 字体粗细为300 */  text-transform: uppercase;   /* 文本转换为大写 */  transform: translate(30%, 0%);/* 初始位置向右偏移30% */  transition-delay: 0.3s;      /* 过渡效果开始前有0.3秒的延迟 */  
}  /*   * 标题内的重点文字样式，字体加粗。  */  
.card .text h2 span {  font-weight: 800;            /* 字体粗细为800 */  
}  /*   * 卡片文本内的段落样式，字体较轻，并使用了transform进行位置调整。  */  
.card .text p {  font-weight: 200;            /* 字体粗细为200 */  transform: translate(0%, 30%);/* 初始位置向下偏移30% */  
}  /*   * 鼠标悬停在卡片上时，图片的透明度变为0.3。  */  
.card:hover img {  opacity: 0.3;  
}  /*   * 鼠标悬停在卡片上时，标题的透明度变为1，位置回归原位，  * 并设置了过渡效果的延迟。  */  
.card:hover .text h2 {  opacity: 1;                  /* 透明度为1 */  transform: translate(0%, 0%); /* 位置回归原位 */  transition-delay: 0.4s;      /* 过渡效果开始前有0.4秒的延迟 */  
}  /*   * 鼠标悬停在卡片上时，段落的透明度变为0.9，位置回归原位，  * 并设置了过渡效果的延迟。  */  
.card:hover .text p {  opacity: 0.9;                /* 透明度为0.9 */  transform: translate(0%, 0%); /* 位置回归原位 */  transition-delay: 0.6s;      /* 过渡效果开始前有0.6秒的延迟 */  
}  /*   * 鼠标悬停在卡片上时，文本前的伪元素背景色变为透明，  * 位置从右侧移动到左侧，透明度变为1，并立即开始过渡效果。  */  
.card:hover .text::before {  background-color: rgba(255, 255, 255, 0); /* 背景色为透明 */  left: 0;                      /* 位置在左侧 */  opacity: 1;                  /* 透明度为1 */  transition-delay: 0s;         /* 过渡效果没有延迟 */  
}

相关文章：

HTML+CSS 文本动画卡片

效果演示 实现了一个图片叠加文本动画效果的卡片&#xff08;Card&#xff09;布局。当鼠标悬停在卡片上时&#xff0c;卡片上的图片会变为半透明&#xff0c;同时显示隐藏在图片上的文本内容&#xff0c;并且文本内容有一个从左到右的渐显动画效果&#xff0c;伴随着一个白色渐…...

编程日记 2024/6/3 6:55:30

MongoDB CRUD操作： 在本地实例进行文本搜索查询

MongoDB CRUD操作&#xff1a; 在本地实例进行文本搜索查询 文章目录 MongoDB CRUD操作&#xff1a; 在本地实例进行文本搜索查询举例创建集合创建文本索引精准搜索排除短语结果排序 在本地实例运行文本搜索查询前&#xff0c;必须先在集合上建立文本索引。MongoDB提供文本索引…...

编程日记 2024/6/3 6:54:29

文档智能开源软件

文档智能介绍&#xff1a; 文档智能通常指的是利用人工智能技术来处理和分析文档内容&#xff0c;以实现自动化、智能化的文档管理。文档智能的应用领域非常广泛&#xff0c;包括但不限于&#xff1a; 1. **文档识别**&#xff1a;使用OCR&#xff08;光学字符识别&#xff0…...

编程日记 2024/6/3 6:50:25

[C][可变参数列表]详细讲解

目录 1.宏含义及使用2.宏原理分析1.原理2.宏理解 1.宏含义及使用 依赖库stdarg.hva_list 其实就是char*类型&#xff0c;方便后续按照字节进行指针移动 va_start(arg, num) 使arg指向可变参数部分(num后面) va_arg(arg, int) 先让arg指向下个元素&#xff0c;然后使用相对位置…...

编程日记 2024/6/3 6:49:24

54. 螺旋矩阵【rust题解】

题目 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 示例 1 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[1,2,3,6,9,8,7,4,5] 示例 2 输入&#xff1a;matrix [[1,2,3,4],[5,6,…...

编程日记 2024/6/3 6:48:23

学习笔记——网络参考模型——TCP/IP模型（传输层）

四、TCP/IP模型-传输层 一、TCP 1、TCP定义 TCP(Transmission Control Protocol&#xff0c;传输控制协议)∶为应用程序提供可靠的面向连接的通信服务。目前&#xff0c;许多流行的应用程序都使用TCP。 连接&#xff1a;正式发送数据之前&#xff0c;提前建立好一种虚拟的&…...

编程日记 2024/6/3 6:47:22

Java中的Instant

在Java中&#xff0c;Instant 是 java.time 包中的一个类&#xff0c;用于表示时间轴上的一个瞬时点&#xff0c;通常以纳秒精度表示。它通常用于表示机器可读的时间戳&#xff0c;而不是人类可读的时间表示&#xff08;如日期和时间&#xff09;。 Instant 主要用于时间计算和…...

编程日记 2024/6/3 6:46:21

PostgreSQL的锁介绍

PostgreSQL的锁介绍 PostgreSQL 中的锁机制是一种用于控制数据并发访问的手段&#xff0c;确保数据库的完整性和一致性。在实际应用中&#xff0c;合理使用锁可以避免数据不一致和减少死锁的发生。 锁类型 PostgreSQL 提供了多种锁类型&#xff0c;以下是一些常见的锁&#…...

编程日记 2024/6/3 6:45:20

4分之1外螺纹怎么编程：挑战与策略解析

4分之1外螺纹怎么编程&#xff1a;挑战与策略解析 在机械制造领域&#xff0c;螺纹编程是一项至关重要的技术任务。当面对如4分之1外螺纹这样的具体需求时&#xff0c;编程人员需要综合运用专业知识与编程技巧&#xff0c;以确保螺纹的精确度和生产效率。本文将围绕四个方面、…...

编程日记 2024/6/3 6:44:17

运用selenium爬取京东商品数据储存到MySQL数据库中

使用Selenium爬取京东商品数据并存储到MySQL数据库中的过程可以分为几个步骤&#xff1a; 1. 准备工作 安装所需库 确保你已经安装了Python环境以及以下库&#xff1a; selenium&#xff1a;用于自动化浏览器操作。pymysql 或 mysql-connector-python&#xff1a;用于连接M…...

编程日记 2024/6/3 6:43:16

K8S SWCK SkyWalking全链路跟踪工具安装

官方参考&#xff1a;如何使用java探针注入器? 配置两个demo&#xff0c;建立调用关系&#xff0c; 首先创建一个基础镜像dockerfile from centos 先安装java 参考: linux rpm方式安装java JAVA_HOME/usr/java/jdk1.8.0-x64 CLASSPATH.:$JAVA_HOME/lib/tools.jar PATH…...

编程日记 2024/6/3 6:42:14

Apache Omid Idea Debug 环境搭建

IDEA 搭建 Apache Omid 源码 DEBUG 环境 Apache Omid 在 Apache HBase 之上提供了多行分布式事务的能力&#xff0c;支持全局 MVCC 功能。简单介绍编译过程。 1.下载 HBase2 并启动 https://dlcdn.apache.org/hbase/ 配置环境变量 export HBASE_HOME/xxx/hbase-2.4.18 exp…...

编程日记 2024/6/3 6:41:13

【面试宝藏】Go并发编程面试题

深入Go语言并发编程 Go语言以其简洁、高效的并发处理能力而闻名。在Go中&#xff0c;通过各种同步机制和原子操作&#xff0c;可以轻松地实现高性能并发编程。本文将深入探讨Go语言中的并发编程&#xff0c;包括Mutex、RWMutex、Cond、WaitGroup、原子操作等内容。 1. Mutex几…...

编程日记 2024/6/3 6:40:12

④单细胞学习-cellchat细胞间通讯

目录 1&#xff0c;原理基础 流程 受体配体概念 方法比较 计算原理 2&#xff0c;数据 3&#xff0c;代码运行 1&#xff0c;原理基础 原文学习Inference and analysis of cell-cell communication using CellChat - PMC (nih.gov) GitHub - sqjin/CellChat: R toolk…...

编程日记 2024/6/3 6:39:11

即时通讯平台及门户系统WorkPlus打造移动应用管理平台

在全球化和数字化时代&#xff0c;企业管理和沟通的方式正发生着巨大的变化。为了实现高效的协作和资源共享&#xff0c;企业越来越倾向于使用即时通讯及门户系统。这两种系统结合起来&#xff0c;可以提供一套完整的沟通和信息发布平台&#xff0c;促进内部协作和信息管理。 …...

编程日记 2024/6/3 6:38:10

React@16.x（12）ref 转发-forwardRef

目录 1&#xff0c;介绍2&#xff0c;类组件如何使用4&#xff0c;应用场景-高阶组件HOC 1&#xff0c;介绍 上篇文章中提到&#xff0c;ref 只能对类组件使用&#xff0c;不能对函数组件使用。 而 ref 转发可以对函数组件实现类似的功能。 使用举例&#xff1a; import Re…...

编程日记 2024/6/3 6:37:08

电脑世界的大冒险：用人体比喻让孩子轻松理解电脑20240603

电脑世界的大冒险&#xff1a;用人体比喻让孩子轻松理解电脑 作为一名在IT行业的老程序猿&#xff0c;我见证了电脑技术的飞速发展&#xff0c;也亲身体验了科技给生活带来的翻天覆地的变化。然而&#xff0c;在这个日新月异的数字时代&#xff0c;我意识到&#xff0c;与孩子…...

编程日记 2024/6/3 6:35:06

构建智慧银行保险系统的先进技术架构

随着科技的不断发展&#xff0c;智慧银行保险系统正日益受到关注。在这个数字化时代&#xff0c;构建一个先进的技术架构对于智慧银行保险系统至关重要。本文将探讨如何构建智慧银行保险系统的先进技术架构&#xff0c;以提升服务效率、降低风险并满足客户需求。 ### 1. 智慧银…...

编程日记 2024/6/3 6:34:05

来自大厂硬盘的降维打击！当希捷酷玩520 1TB SSD卷到369，请问阁下该怎么应对？

来自大厂硬盘的降维打击&#xff01;当希捷酷玩520 1TB SSD卷到369&#xff0c;请问阁下该怎么应对&#xff1f; 哈喽小伙伴们好&#xff0c;我是Stark-C~ 今年4月份的时候因为电脑上的游戏盘突然挂掉&#xff0c;为了性价比选购了希捷酷玩520 1TB SSD&#xff0c;同时我也是…...

编程日记 2024/6/3 6:33:04

什么是封装？为什么是要封装？

封装是面向对象编程中的一种核心概念&#xff0c;它是将数据和操作数据的方法结合起来&#xff0c;形成一个整体&#xff0c;对外只暴露必要的接口&#xff0c;隐藏内部的具体实现细节。 封装的目的是为了实现信息隐藏和代码的模块化&#xff0c;具体原因如下&#xff1a; 1.…...

编程日记 2024/6/3 6:31:01

避开这3个坑！Cortex-M3/M4使用DWT计数器时的常见错误与解决方法

Cortex-M3/M4开发实战&#xff1a;DWT计数器避坑指南与高阶应用技巧 在嵌入式系统开发中&#xff0c;精确的时间测量往往是性能优化和调试的关键。Cortex-M3/M4内核内置的DWT(Data Watchpoint and Trace)组件&#xff0c;特别是其CYCCNT计数器&#xff0c;为开发者提供了一个零…...

编程新知 2026/4/1 2:01:54

Python内存监控体系搭建：Prometheus+Custom Metrics+内存火焰图，实现OOM前15分钟精准预警

第一章&#xff1a;Python智能体内存管理策略 Python智能体&#xff08;如基于LLM的Agent、ReAct架构或Tool-Calling Agent&#xff09;在运行过程中频繁创建临时对象、缓存推理上下文、序列化工具调用结果&#xff0c;导致内存压力显著高于常规脚本。其内存管理需兼顾GC效率、…...

编程新知 2026/4/1 1:55:48

基于高斯过程回归的MATLAB时间序列区间预测代码实现与解析

基于高斯过程回归(GPR)的时间序列区间预测 GPR时间序列区间预测 matlab代码 暂无Matlab版本要求 -- 推荐 2018B 版本及以上做时间序列最烦的就是拍脑袋给个“明天涨3%左右”——“左右”到底是正负0.5还是正负3&#xff1f;如果是风电发电的负荷申报&#xff0c;正负差多了要罚…...

编程新知 2026/4/1 1:06:39

C语言编程基础与核心概念详解

1. C语言入门基础解析C语言作为编程世界的基石语言&#xff0c;其简洁高效的特性使其在系统编程、嵌入式开发等领域占据不可替代的地位。我第一次接触C语言是在大学计算机系的实验室里&#xff0c;那个打印出"Hello World"的瞬间至今记忆犹新。让我们从最基础的部分开…...

编程新知 2026/4/1 1:06:39

【Skills开发实战指南】第01篇：Skills开发入门：AI助手的能力扩展革命

快速导航 读完本文&#xff0c;你将获得&#xff1a; ✅ 深入理解Skills是什么以及为什么需要它✅ 掌握Skills在AI编程工具中的核心价值✅ 了解Skills的完整生态和应用场景✅ 明确Skills开发的学习路径和资源✅ 准备好开始你的第一个Skills开发项目 一、Skills是什么&#xf…...

编程新知 2026/4/1 1:00:23

RT-Thread下STM32与BH1750光照传感器的快速驱动实现

1. RT-Thread与BH1750的完美组合 第一次接触BH1750光照传感器时&#xff0c;我还在用裸机开发。当时为了调试IIC通讯&#xff0c;整整花了两天时间排查时序问题。后来接触到RT-Thread&#xff0c;发现它的软件包生态简直是为传感器开发量身定制的。就拿BH1750来说&#xff0c;官…...

编程新知 2026/4/1 0:17:43

Vue3+Three.js实战：拆解Xtreme1点云标注工具的技术架构

Vue3Three.js深度实战&#xff1a;构建工业级3D点云标注工具的技术解析 在自动驾驶、工业检测和机器人视觉领域&#xff0c;3D点云标注工具正成为AI训练数据生产的核心基础设施。Xtreme1作为开源多模态标注平台的代表&#xff0c;其pc-tool模块采用Vue3Three.js技术栈实现了专…...

编程新知 2026/4/1 0:01:32

SDMatte与LSTM结合研究：时序视频抠图的初步探索

SDMatte与LSTM结合研究&#xff1a;时序视频抠图的初步探索 1. 引言&#xff1a;视频抠图的新挑战 视频抠图技术一直是影视后期和内容创作领域的重要工具。传统的静态图像抠图方法在处理视频时常常面临一个棘手问题&#xff1a;帧与帧之间的结果不一致&#xff0c;导致最终视…...

编程新知 2026/3/31 23:57:29

LoRa Feather固件设计：ESP32-S3多外设协同与低功耗调度

1. 项目概述“LoRa Feather”并非一个官方发布的标准化嵌入式库&#xff0c;而是由开发者基于 Adafruit LoRa FeatherWing&#xff08;如 RFM95W/RFM96W 模块&#xff09;与 ESP32-S3&#xff08;特别是带 TFT 显示屏的 Adafruit Feather ESP32-S3 Reverse&#xff09;硬件平台…...

编程新知 2026/3/31 22:26:12

壁仞科技上市后首次年报：2025年营收10亿 经调整亏损8.7亿

雷递网 雷建平 3月30日上海壁仞科技股份有限公司&#xff08;股份代号&#xff1a;6082&#xff09;今日发布截至2025年12月31日的财报。财报显示&#xff0c;壁仞科技2025年营收为10.35亿元&#xff0c;较上年同期的3.37亿元增长207.2%。壁仞科技2025年毛利为5.57亿元&#xf…...

编程新知 2026/3/31 22:09:58