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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

15、matlab绘图汇总(图例、标题、坐标轴、线条格式、颜色和散点格式设置)

1、plot()函数默认格式画图 代码&#xff1a; x0:0.1:20;%绘图默认格式 ysin(x); plot(x,y) 2、X轴和Y轴显示范围/axis()函数 代码&#xff1a; x0:0.1:20;%绘图默认格式 ysin(x); plot(x,y) axis([0 21 -1.1 1.1])%设置范围 3、网格显示/grid on函数 代码&#xff1a; …

c++ 继承多态详解

第一节&#xff1a;继承&#xff1a; 1&#xff0c;相关概念 父类&#xff0c;基类。子类&#xff0c;派生类 &#xff08;1&#xff09;基类的私有成员&#xff0c;派生类不可访问 &#xff08;2&#xff09;基类中被保护的成员再子类中可以被访问&#xff0c;但是在类外不可…

计算机毕业设计Hadoop+Spark+Hive知识图谱租房推荐系统 租房数据分析 租房爬虫 租房可视化 租房大数据 大数据毕业设计 大数据毕设 机器学习

毕 业 设 计&#xff08;论 文&#xff09; 基于大数据的租房数据爬虫与推荐分析系统 姓 名 学 院 专 业 班 级 指导教师 摘 要 本设计是一个基于爬虫技术的房地产数据采集与可视化分析应用程序。该程序首先通过爬虫采集网上所有房地产的房源数据…

华为坤灵交换机S300, S500, S210,S220, S200, S310 如何WEB抓包

通过S系列交换机配置端口镜像实现抓包 1、应用场景 端口镜像是指将经过指定端口(源端口或者镜像端口)的报文复制一份到另一个指定端口(目的端口或者观察端口)。在网络运营与维护的过程中&#xff0c;为了便于业务监测和故障定位&#xff0c;网络管理员时常要获取设备上的业务报…

数据分析常用模型合集(二)RARRA模型、RFM模型

随着互联网的发展&#xff0c;前期平台的砸钱拉新、抢占市场&#xff0c;大家都叫AARRR小甜甜&#xff1b; 现在市场基本抢占得差不多&#xff0c;形成了一个平衡&#xff0c;新人基本拉不到多少&#xff0c;用户都知道干什么事有哪些平台&#xff0c;比如买东西主流淘宝、京东…

kotlin1.8.10问题导致gson报错TypeToken type argument must not contain a type variable

书接上回&#xff0c;https://blog.csdn.net/jzlhll123/article/details/139302991。 之前我发现gson报错后&#xff1a; gson在2.11.0给我的kotlin项目代码报错了。 IllegalArgumentException: TypeToken type argument must not contain a type variable 上次解释原因是因为&…

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

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

量子加速超级计算简介

本文转载自&#xff1a;量子加速超级计算简介(2024年 3月 13日) By Mark Wolf https://developer.nvidia.cn/zh-cn/blog/an-introduction-to-quantum-accelerated-supercomputing/ 文章目录 一、概述二、量子计算机的构建块&#xff1a;QPU 和量子位三、量子计算硬件和算法四、…

3DMAX建筑生长动画插件PolyFX安装使用方法

3DMAX建筑生长动画插件PolyFX安装使用教程 PolyFX插件是一个功能强大的工具&#xff0c;它可以将对象分解为片段并根据需要设置动画。它有许多用于微调动画的选项和一些附加工具。这是制作宣传视频、游戏开发等的绝佳解决方案。 【版本要求】 3ds max 2010-2025&#xff08;不…

探究MySQL中的“树”结构

1 引言 树高千丈,叶落求索 – 唐代杜牧 树结构在MySQL中常用于表示层次关系,如组织结构或分类体系。引入树结构可使数据之间建立父子关系,便于查询和管理。益处包括快速检索子节点、方便展示层次关系、支持递归查询等。 2 基础概念 2.1 名词解析 程序就像是一张有向图,你…

Pipecat: 创建语音对话agent的开源框架,支持多模态!

项目简介 pipecat 是用于构建语音&#xff08;和多模态&#xff09;对话代理的框架。诸如私人教练、会议助理、儿童讲故事玩具、客户支持机器人、摄入流程和尖刻的社交伙伴。 看看一些示例应用&#xff1a; 语音代理入门 您可以开始在本地计算机上运行 Pipecat&#xff0c;然…

ES6-03-模版字符串、对象的简化写法

一、模版字符串 1-1、声明 反引号。 1-2、特性 1、字符串内容可以直接换行 得用号连接 2、变量拼接 现在&#xff1a; 二、对象的简化写法 ES6允许在大括号里面&#xff0c;直接写入变量和函数&#xff0c;作为对象的属性和方法。 let name milk;let chage function(){con…

【pip安装】YOLOv8目标检测初步上手

说明&#xff1a;本篇blog是关于Ultralytics官方教程的学习笔记&#xff0c;环境为windowsconda 1、下载安装YOLOv8 1.1 YOLOv8介绍 Ultralytics YOLOv8 是一个尖端的、最先进的&#xff08;SOTA&#xff09;模型&#xff0c;它建立在以前 YOLO 版本的成功基础之上&#xff0…

使用System-Verilog实现FPGA基于DE2-115开发板驱动HC_SR04超声波测距模块|集成蜂鸣器,led和vga提示功能

文章目录 前言一、实验原理1.1 传感器概述&#xff1a;1.2 传感器引脚1.3 传感器工作原理1.4 整体测距原理及编写思路 二、System-Verilog文件2.1 时钟分频&#xff08;1&#xff09;clk_div.sv2.2 超声波测距&#xff08;1&#xff09;hc_sr_trig.sv&#xff08;2&#xff09;…

简单聊聊分布式系统和微服务

分布式系统是由多个独立的计算机节点通过网络相互连接协作&#xff0c;共同完成一项或多项任务的系统。这些节点可以是服务器、个人电脑、移动设备等&#xff0c;它们之间通过消息传递或共享数据来协调工作&#xff0c;每个节点负责系统整体功能的一部分。分布式系统的关键在于…

k8s学习--k8s集群使用容器镜像仓库Harbor

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 环境 步骤一 容器镜像仓库Harbor部署二、Kubernetes集群使用harbor仓库 环境 Ip主机名cpu内存硬盘192.168.10.11master1cpu双核2G40G192.168.10.12node011cpu双核2…

网络链路层

data: 2024/5/25 14:02:20 周六 limou3434 叠甲&#xff1a;以下文章主要是依靠我的实际编码学习中总结出来的经验之谈&#xff0c;求逻辑自洽&#xff0c;不能百分百保证正确&#xff0c;有错误、未定义、不合适的内容请尽情指出&#xff01; 文章目录 1.协议结构2.封装分离3.…

计算机毕业设计 | SpringBoot 房屋销售租赁平台 房屋购物网站(附源码)

1&#xff0c;绪论 1.1 背景调研 在房地产行业持续火热的当今环境下&#xff0c;房地产行业和互联网行业协同发展&#xff0c;互相促进融合已经成为一种趋势和潮流。本项目实现了在线房产平台的功能&#xff0c;多种技术的灵活运用使得项目具备很好的用户体验感。 这个项目的…

Python自动化识别与删除Excel表格空白行和列

在处理Excel数据时&#xff0c;经常会遇到含有空白行和空白列的情况。这些空白区域不仅占用表格显示空间&#xff0c;还可能导致数据分析时出现偏差&#xff0c;影响数据处理的效率与结果的准确性&#xff0c;如空白行可能干扰数据聚合操作&#xff0c;导致统计计数不准确&…

【嵌入式DIY实例】-OLED显示天气数据

OLED显示天气数据 文章目录 OLED显示天气数据1、硬件准备与接线2、天气数据获取准备3、代码实现在这个物联网项目中,本文将展示如何使用 ESP8266 NodeMCU (ESP-12E) Wi-Fi 开发板和 SSD1306 OLED 显示屏(12864 像素)制作一个简单的互联网气象站。 NodeMCU 从天气网站 openwe…