HTML+CSS 文本动画卡片

效果演示

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;         /* 过渡效果没有延迟 */  
}

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

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

相关文章

Python命令行参数处理:详解argparse模块

Python命令行参数处理&#xff1a;详解argparse模块 在Python开发中&#xff0c;能够处理命令行参数是一项非常实用的技能。argparse模块是Python标准库中用于解析命令行参数的模块&#xff0c;它能够轻松地处理复杂的命令行接口。本文将详细介绍如何使用argparse模块来处理命…

YOLOV10训练自己的数据集

*************************************************** 码字不易&#xff0c;收藏之余&#xff0c;别忘了给我点个赞吧&#xff01; *************************************************** Start YOLOV10训练自己的数据集 官方论文&#xff1a;https://arxiv.org/abs/2405…

使用busybox快速创建rootfs系统(硬件:atk-dl6y2c)

目录 概述 1 编译busybox 1.1 配置Makefile 1.2 需改参数 1.3 配置busybox 1.4 编译busybox 2 完善 rootfs下文件 2.1 rootfs 的“/lib”目录添加库文件 2.2 rootfs 的“usr/lib”目录添加库文件 2.3 创建其他目录 3 完善其他文件 3.1 完善etc/init.d/rcS 3.2 完善…

Golang | Leetcode Golang题解之第128题最长连续序列

题目&#xff1a; 题解&#xff1a; func longestConsecutive(nums []int) int {numSet : map[int]bool{}for _, num : range nums {numSet[num] true}longestStreak : 0for num : range numSet {if !numSet[num-1] {currentNum : numcurrentStreak : 1for numSet[currentNum…

【CMake】CMake入门(五)打包安装程序 使用CMake管理库 打包调试版和发行版

本篇文章不是新手入门教学文章&#xff0c;主要是记录笔者个人的学习笔记 CMake入门&#xff08;五&#xff09; 一、打包二、使用CMake管理库三、打包调试版和发行版 一、打包 发布程序可以有多种形式&#xff0c;比如安装包、压缩包、源文件等。CMake也提供了打包程序cpack可…

YOLOv8训练自定义项目

训练内容&#xff1a;基于yolo的筒纱实例分割 数据设置&#xff1a; 1&#xff09;https://ultralytics.com/assets/coco8-seg.zip&#xff0c;下载coco8-seg.zip&#xff0c;解压&#xff0c;记住各个文件夹内的文件名&#xff08;12为为长度&#xff0c;如000000000001.jpg…

8、架构-分布式的共识

概述 在正式探讨分布式环境中面临的各种技术问题和解决方案前&#xff0c;我 们先把目光从工业界转到学术界&#xff0c;学习几种具有代表性的分布式共识 算法&#xff0c;为后续在分布式环境中操作共享数据准备好理论基础。下面笔 者从一个最浅显的场景开始&#xff0c;引出本…

金钱的认知,你如何理解呢?

金钱的认知 建立在金钱之上的爱情是纯真的爱&#xff0c;朋友关系也才够纯粹&#xff0c;才是单纯的世界&#xff0c;反之没了钱的条件爱情和友情的美好关系极易破碎&#xff0c;也极易反目成仇。 心若美好钱就美好&#xff0c;心有欲望狰狞钱就是只咬人的老虎&#xff0c;钱…

python练习五

Title1&#xff1a;请实现一个装饰器&#xff0c;每次调用函数时&#xff0c;将函数名字以及调用此函数的时间点写入文件中 代码&#xff1a; import time time time.strftime("%Y-%m-%d %H:%M:%S", time.localtime()) # 获取当前的时间戳 # 定义一个有参装饰器来实…

Linux 僵尸进程和孤儿进程

一.Z(zombie)-僵尸进程 1.僵死状态&#xff08;Zombies&#xff09;是一个比较特殊的状态。当进程退出并且父进程&#xff08;使用wait()系统调用后&#xff09;没有读取到子进程退出的返回代码时就会产生僵死(尸)进程 2.僵死进程会以终止状态保持在进程表中&#xff0c;并且会…

【代码随想录37期】Day24 回溯 组合

理论基础 回溯是一种搜索方式&#xff0c;通常通过穷举来解决问题&#xff0c;核心思想是从一个初始状态出发、暴力搜索所有可能的方案&#xff0c;遇到正确的解法则记录下来&#xff0c;直到结束&#xff0c;这是一个典型的深度优先搜索思想&#xff1a;不撞南墙不回头 回溯…

Java17 --- SpringCloud之seate

目录 一、创建seata需要的mysql数据库表 二、修改seata的配置文件 三、启动nacos及seata 四、创建需要的数据库及表 一、创建seata需要的mysql数据库表 CREATE DATABASE seata;CREATE TABLE IF NOT EXISTS global_table(xid VARCHAR(128) NOT NULL,…

C++ | Leetcode C++题解之第128题最长连续序列

题目&#xff1a; 题解&#xff1a; class Solution { public:int longestConsecutive(vector<int>& nums) {unordered_set<int> num_set;for (const int& num : nums) {num_set.insert(num);}int longestStreak 0;for (const int& num : num_set) {…

隐马尔可夫链

1 马尔可夫链 马尔科夫链&#xff08;Markov Chain&#xff09;是一种数学模型&#xff0c;它描述了一系列可能事件的概率&#xff0c;其中每个事件的发生仅依赖于前一个事件的状态。这一特性称为“无记忆性”或“马尔可夫性质”。我将用一个简单的天气预测模型作为例子来解释马…

【组合数学 隔板法 容斥原理】放球问题

本文所属分类 组合数学汇总 8类放球问题 放球问题是一类很有意思的排列组合问题。通俗来说&#xff0c;就是把n个小球放到m个盒子里&#xff0c;问有几种放法。具体可以从3个维度&#xff0c;每个维度2种情况&#xff0c;共8种情况&#xff1a; 维度一&#xff1a;小球是否相…

对象业务的追加写接口

类似文件的追加写操作&#xff0c;在对象的末尾增加新的数据内容。 本文有如下假定&#xff1a; 对象存储服务基于文件语义实现。使用PUT方式上传的对象&#xff0c;内部使用一个文件和对应的元数据来承载。使用多段方式上传的对象&#xff0c;内部使用多个段文件、元数据来承…

【面试题-012】什么是Spring 它有哪些优势

文章目录 Spring有哪些优势有哪些优势Spring和Springboot区别在 Spring 框架中&#xff0c;什么是AOP核心概念应用场景 Spring有哪些通知类型 Spring 是一个开源的 Java 平台&#xff0c;由 Rod Johnson 创建&#xff0c;用于简化企业级 Java 应用程序的开发。它于 2003 年首次…

T-Pot多功能蜜罐实践@debian12@FreeBSD

T-Pot介绍 T-Pot是一个集所有功能于一身的、可选择分布式的多构架&#xff08;amd64&#xff0c;arm64&#xff09;蜜罐平台&#xff0c;支持20多个蜜罐和很多可视化选项&#xff0c;使用弹性堆栈、动画实时攻击地图和许多安全工具来进一步改善欺骗体验。GitHub - telekom-sec…

15.FreeRTOS数据结构:StreamBuffer,MessageBuffer和Queue的区别

FreeRTOS数据结构&#xff1a;StreamBuffer&#xff0c;MessageBuffer和Queue的区别 介绍 在嵌入式系统开发中&#xff0c;任务间的通信是非常重要的一部分。FreeRTOS提供了多种数据结构来实现任务间的通信&#xff0c;包括StreamBuffer&#xff0c;MessageBuffer和Queue。这…

SpringBootWeb登录认证

JWT令牌 JSON Web Token JSON Web Tokens - jwt.ioJSON Web Token (JWT) is a compact URL-safe means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object that is digitally signed using JSON Web Signatur…