AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

HTML+CSS制作人物介绍卡片效果

2023-11-23 162
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： HTML+CSS制作人物介绍卡片效果

HTML+CSS制作人物介绍卡片效果

效果图如下：

HTML部分源代码如下：

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作人物介绍</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 开始 -->
    <div class="card">
        <div class="photo">
            <img src="1.jpg">
        </div>
        <h1>马云 Jack Ma</h1>
        <h2>阿里巴巴 alibaba.com</h2>
        <p>马云，男，汉族，中共党员，1964年9月10日生于浙江省杭州市，祖籍浙江省嵊州市谷来镇。</p>
        <a href="#">了解更多</a>
    </div>
    <div class="card">
        <div class="photo">
            <img src="2.jpg">
        </div>
        <h1>马化腾 Pony</h1>
        <h2>腾讯 tencent.com</h2>
        <p>马化腾，汉族，1971年10月29日生于广东省东方县八所港，广东省汕头市潮南区人。</p>
        <a href="#">了解更多</a>
    </div>
    <div class="card">
        <div class="photo">
            <img src="3.jpg">
        </div>
        <h1>刘强东 Richard Liu</h1>
        <h2>京东 jd.com</h2>
        <p>刘强东，男，汉族，1973年3月10日生（另一说法：1974年2月14日），江苏宿迁人，祖籍湖南湘潭。</p>
        <a href="#">了解更多</a>
    </div>
</body>
</html>

CSS部分源代码如下：

:root {
    --background-color: #2c3e50;
    --border-color: #7591AD;
    --text-color: #34495e;
    --color1: #EC3E27;
    --color2: #fd79a8;
    --color3: #0984e3;
    --color4: #00b894;
    --color5: #fdcb6e;
    --color6: #e056fd;
    --color7: #F97F51;
    --color8: #BDC581;
    --a_border_color: #86a3b3;
    --h2_border_color: #8ea2b8;
    --a_hover_background_color: #86a3b3;
    --font_color: #e8f6fd;
}
* {
    margin: 0;
    padding: 0;
}
html {
    font-size: 14px;
}
body {
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
}
.card {
    /* flex布局下元素不按比例缩放 */
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
    width: 300px;
    height: 450px;
    overflow: hidden;
    margin: 20px;
    background-color: var(--border-color);
    border-radius: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* flex 子元素 纵向排列 */
    flex-direction: column;
    /* 增加个阴影 */
    box-shadow: 0 0 30px #2c2c2c;
    /* 同意给字体价格颜色 */
    color: var(--font_color)
}
.photo {
    position: absolute;
    /* 默认为放大 */
    width: 100%;
    height: 100%;
    top: 0px;
    border-radius: 0%;
    overflow: hidden;
    transition: 0.5s;
}
.photo::before {
    /* 通过before增加渐变背景实现遮罩，让文字默认看起来清晰一些 */
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, #333, transparent);
}
.card:hover .photo::before{
    /* 缩小时隐藏 */
    display: none;
}
.photo img {
    /* 图片高宽均为100% */
    /* 然后按照cover缩放，裁切长边 */
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card:hover .photo {
    /* 鼠标移上变小 */
    width: 120px;
    height: 120px;
    top: 30px;
    border-radius: 50%;
    box-shadow: 0 0 20px #111;
}
h1 {
    position: absolute;
    top: 380px;
    transition: 0.5s;
}
.card:hover h1 {
    position: absolute;
    top: 170px;
}
h2 {
    margin-top: 220px;
    width: 80%;
    font-weight: normal;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--h2_border_color);
}
p {
    width: 90%;
    /* 段落缩进2个字符大小 */
    text-indent: 2em;
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 30px;
}
a {
    color: var(--font_color);
    text-decoration: none;
    padding: 12px 36px;
    border: 1px solid var(--a_border_color);
    border-radius: 8px;
}
a:hover {
    color: #Fff;
    background-color: var(--a_hover_background_color);
}


文章标签：
前端开发
关键词：
HTML CSS
CSS卡片
html CSS卡片
CSS html
王同学睡醒了
目录
相关文章
二二*一一
|
8天前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
29 1
进步`于辰
|
11天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧，包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录，便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码，帮助读者更好地理解和应用这些知识点。
进步`于辰
34 1
[HTML、CSS]细节与使用经验
进步`于辰
|
12天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
27 1
[HTML、CSS]知识点
aliyun8599273441-30642
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代，拥有一个个人博客不仅是展示自我的平台，也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建，涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章，你将学会如何从零开始构建自己的网络空间，并在互联网世界留下你的足迹。
aliyun8599273441-30642
255 65
游客g5tp3lgf24cqc
|
7天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
游客g5tp3lgf24cqc
37 12
温轻舟
|
4天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
31 1
蓝易云
|
9天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
19 3
疯狂的猿
|
19天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
69 6
chnjames
|
30天前
|
前端开发 JavaScript API
探索 CSS Houdini：轻松构建酷炫的 3D 卡片翻转动画
本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能，展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力，实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API，并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例，展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后，还演示了如何将这种 3D 翻卡效果集成到公司网站中，提升用户体验。CSS Houdini 的创新能力为网页设计带来了前所未有的灵活性，推动了前端开发迈向新的高度。
chnjames
26 0
探索 CSS Houdini：轻松构建酷炫的 3D 卡片翻转动画
游客44yag4ft7nckq
|
18天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式，通过&lt;head&gt;部分的&lt;style&gt;标签定义；外部样式表适用于多个页面，通过&lt;link&gt;标签引用外部CSS文件；&lt;style&gt;定义样式，&lt;link&gt;引用资源；已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;，属性有color和bgcolor。
游客44yag4ft7nckq
23 0

热门文章

最新文章

  • 1
    CSS3实现多样的边框效果
  • 2
    Css基本样式————字体
  • 3
    CSS3-实现单选框radio的小动画
  • 4
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 5
    纯CSS3实现宽屏二级下拉菜单
  • 6
    CSS3实现时间轴效果
  • 7
    05.javascript访问CSS
  • 8
    CSS伪元素实现的3D按钮
  • 9
    CSS3中的选择器
  • 10
    如何用纯 CSS 创作一个赛车 loader
  • 1
    Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易，而且功能比纯文本更强。
    130
  • 2
    Sphinx是一个Python文档生成工具，它可以解析reStructuredText或Markdown格式的源代码注释，并生成多种输出格式，如HTML、LaTeX、PDF、ePub等。
    81
  • 3
    【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行
    558
  • 4
    提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
    156
  • 5
    动态粒子发射404网站HTML源码
    60
  • 6
    【Python】已解决：bs4.FeatureNotFound: Couldn’t find a tree builder with the features you requested: html5
    322
  • 7
    HTML 【实用教程】（2024最新版）
    45
  • 8
    HTML【详解】表格 table 标签（table的属性，语义化表格，简易表格，合并单元格）
    251
  • 9
    HTML【详解】超链接 a 标签的四大功能（页面跳转、页内滚动【锚点】、页面刷新、文件下载）
    159
  • 10
    ​「Python大数据」词频数据渲染词云图导出HTML
    84

    • 相关课程

    更多
  • CSS 快速掌握
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 一键创建和部署高分电影推荐语音技能
  • HTML及前端框架
  • 1分钟制作专属的RFID安全标签
  • 快速实现摄像头视频画面的远程预览
  • 收银台的场景化界面实践
    • 下一篇
    阿里云OSS设置跨域访问