人物介绍卡

最新推荐文章于 2025-04-25 21:37:23 发布

七莫七莫七

最新推荐文章于 2025-04-25 21:37:23 发布

阅读量848

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_50344936/article/details/127242701

版权

本文介绍了如何使用CSS3和HTML创建一个人物介绍卡，当鼠标悬停时图片会缩小。文章提供了详细的HTML结构和CSS样式代码，并强调了文件路径在引入CSS和图片时的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

人物介绍卡

鼠标移上去之后就会缩小

在这里插入图片描述

一、先看看效果

如上图，将鼠标移上去之后图片就会缩小

二、代码

1.html部分

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>人物介绍卡</title>
		<link rel="stylesheet" href="css/renwujieshao.css"/>
	</head>
	<body>
		<div class="card">
			<div class="photo">
				<img src="img/a.jpeg"/>
			</div>
			<h1>艾斯</h1>
			<h2>“火拳”艾斯</h2>
			<p>波特卡斯D艾斯，日本漫画《航海王》及其衍生作品中国的角色。萨博与路飞的结义兄弟。</p>
			<a href="#">了解更多</a>
		</div>
		
		
		<div class="card">
			<div class="photo">
				<img src="img/s.jpeg"/>
			</div>
			<h1>萨博</h1>
			<h2&g