CSS 实现个人资料卡

CSS 实现个人资料卡

效果展示

在这里插入图片描述

CSS 知识点

  • CSS 综合知识运用

页面整体布局

<div class="card"><div class="imgBox"><img src="./bg.jpg" /></div><div class="content"><div class="details"><h2>Alina Smith<br /><span>Senior UX/UI Designer</span></h2><div class="data"><h3>342<br /><span>Posts</span></h3><h3>120K<br /><span>Followers</span></h3><h3>285<br /><span>Following</span></h3></div><div class="actionBtn"><button>Follow</button><button>Message</button></div></div></div>
</div>

实现个人资料卡基本样式和鼠标悬停样式

.card {position: relative;width: 350px;height: 190px;background: #fff;border-radius: 20px;box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15);transition: 0.5s;
}.card:hover {height: 450px;
}

编写图片个人资料头像样式

.imgBox {position: absolute;top: -50px;left: 50%;transform: translateX(-50%);width: 150px;height: 150px;background: #fff;border-radius: 20px;box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);overflow: hidden;transition: 0.5s;
}.imgBox img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;
}.card:hover .imgBox {width: 250px;height: 250px;
}

编写个人资料卡信息部分基础样式

.card {/* 为了方便编写个人资料卡信息部分的样式,我们这里把高度改为450px */height: 450px;
}.card .content {position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: flex-end;
}.card .content .details {padding: 40px;text-align: center;width: 100%;transition: 0.5s;
}

编写个人资料卡信息数据样式

.card .content .details h2 {font-size: 1.25em;font-weight: 600;color: #555;line-height: 1.2em;
}.card .content .details h2 span {font-size: 0.75em;font-weight: 500;opacity: 0.5;
}.card .content .details .data {display: flex;justify-content: space-between;margin: 20px 0;
}.card .content .details .data h3 {font-size: 1em;color: #555;line-height: 1.2em;font-weight: 600;
}.card .content .details .data h3 span {font-size: 0.85em;font-weight: 400;opacity: 0.5;
}.card .content .details .actionBtn {display: flex;justify-content: space-between;
}.card .content .details .actionBtn button {padding: 10px 30px;border-radius: 5px;border: none;outline: none;font-size: 1em;font-weight: 500;background: #ff5f95;color: #fff;cursor: pointer;
}.card .content .details .actionBtn button:nth-child(2) {border: 1px solid #999;color: #999;background: #fff;
}

编写资料卡信息部分悬停样式

.card {/* 把这里的高度改为190px */height: 190px;
}.card .content {overflow: hidden;
}.card .content .details {transform: translateY(150px);
}.card:hover .content .details {transform: translateY(0px);
}

完整代码下载

完整代码下载

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

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

相关文章

python数据分析---ch11 python数据描述性统计

python数据分析--- ch11 python数据描述性统计 1. Ch11--描述性统计2. 数据集中趋势的度量2.1 平均值2.2 中位数2.3 众数2.4 几何平均值2.5 调和平均值 3. 数据离散趋势的度量3.1 极差3.2 平均绝对偏差(MAD)3.3 方差和标准差3.4 下偏方差和下偏标准差3.5 目标下偏方差和目标下偏…

YOLOv10网络架构及特点

YOLOv10简介 YOLOv10是清华大学的研究人员在Ultralytics Python包的基础上&#xff0c;引入了一种新的实时目标检测方法&#xff0c;解决了YOLO 以前版本在后处理和模型架构方面的不足。通过消除非最大抑制&#xff08;NMS&#xff09;和优化各种模型组件&#xff0c;YOLOv…

工程设计问题---压力容器设计

参考文献&#xff1a; [1] 吴擎, 徐惟罡, 张春江. 基于师生交流机制的改进类电磁机制算法[J]. 计算机集成制造系统, 2020, 26(4): 1033-1042.

语义分割和目标检测的关系

目录 1.语义分割的目标 2.目标检测的目标 3.两种任务的异同之处 从大方向的任务特点上来说 &#xff08;1&#xff09;物体的位置 &#xff08;2&#xff09;物体的分类 从数据格式来说 (1&#xff09;语义分割的数据格式 (2&#xff09;目标检测的数据格式 1.语义分…

基于单片机和GP2Y1010AU粉尘传感器的空气质量检测仪设计

摘要 随着社会的发展,随着工业的发展,其给人们的生活带来很多便利。然而,工业生产过程中会产生很多对人体有害的因素,比如煤炭开采、水泥生产等行业中的粉尘污染。其在各种危害因素中对人体健康的影响最为严重。粉尘对人体的危害最直接、最严重的是引起尘肺病。当粉尘浓度过…

Office办公软件如何下载安装?Office 2021最佳的办公软件安装包资源分享!

Office软件这种文档格式的普及&#xff0c;得益于其高度的兼容性和通用性&#xff0c;使得用户能够轻松地在不同的电脑和平台上打开和编辑文件。 Office软件文档格式的通用性&#xff0c;意味着无论是Windows、macOS还是Linux等操作系统&#xff0c;用户都能无障碍地打开和浏览…

达梦数据库创建用户并授予

需求描述&#xff1a; 1.想创建一个用户&#xff0c;这用户能访问其他3个用户的资源&#xff0c;权限是只读&#xff0c;这种创用户的sql怎么写&#xff1f; 2.怎么修改用户密码呢&#xff1f; 环境&#xff1a; 通用机 一、创建用户并授权 1.创建业务用户步骤 step1:创建…

Unity 3D 物体的Inspector面板

1、Transform&#xff1a;位置、旋转、大小 2、Mesh Filter&#xff1a;物体的形状 3、Mesh Renderer&#xff1a;物体渲染&#xff08;物体的衣服&#xff09; 4、Collider&#xff1a;碰撞体

Orange Pi AIpro:高性能AI开发板开箱体验及样例测试

文章目录 前言背景介绍产品介绍主要参数配置AI处理器——昇腾310 NPU模型训练预测加载resnet50模型真实动物测试虚拟动物测试 前言 随着人工智能和物联网技术的迅速发展&#xff0c;单板计算机&#xff08;Single Board Computer, SBC&#xff09;在创客和开发者社区中越来越受…

电脑意外出现user32.dll丢失的八种修复方法,有效解决user32.dll文件丢失

遇到与 user32.dll 相关的错误通常是因为该文件已损坏、丢失、或者与某些软件冲突。今天这篇文章寄给大家介绍八种修复user32.dll丢失的方法&#xff0c;下面是一步步的详细教程来解决这个问题。 1. 重新启动电脑 第一步总是最简单的&#xff1a;重新启动你的电脑。许多小问题…

springboot依赖管理和自动配置

依赖管理和自动配置 依赖管理和自动配置依赖管理什么是依赖管理修改自动仲裁/默认版本号 starter场景启动器starter场景启动器基本介绍官方提供的starter第三方starter 自动配置自动配置基本介绍SpringBoot自动配置了哪些?如何修改默认配置如何修改默认扫描包结构resources\ap…

Vue路由守卫的使用

示例如下&#xff1a;&#xff08;第一张图&#xff09;当你点击车1的时候你写了路由守卫就点不开出现无权访问 &#xff08;第二张图&#xff0c;就是可以访问后的图&#xff09;有路由守卫点不开的情况下当你在本地存储中写了你在路由守卫中写的东西就可以进入了 你需要在r…

飞书API 2-1:如何通过 API 创建文件夹?

本文探讨如何通过飞书的 API 来创建文件夹。通过 API 创建的文件夹&#xff0c;一般是放在共享空间&#xff0c;如果要放在个人空间&#xff0c;建议手动创建。 查看 API 文档 API 路径&#xff0c;可在飞书开放平台的服务端 API&#xff0c;依次查找云文档>云空间>文件…

Iptables深入浅出

1、iptables的基本概念 众所周知iptables是Linux系统下自带免费的包过滤防火墙。其实不然&#xff0c;iptables其实不是真正的防火墙&#xff0c;我们可以把它理解成一个客户端代理&#xff0c;用户通过iptables这个代理&#xff0c;将用户的安全设定执行到对应的”安全框架”…

05-5.3.1_1 二叉树的先中后序遍历

&#x1f44b; Hi, I’m Beast Cheng&#x1f440; I’m interested in photography, hiking, landscape…&#x1f331; I’m currently learning python, javascript, kotlin…&#x1f4eb; How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以订…

大家来决定:python-office运行时的提示信息,要不要删除?

​ 大家好&#xff0c;这里是程序员晚枫&#xff0c;今天想请大家投票决定一下&#xff1a;运行python-office时的下面这种中文提示信息&#xff0c;要不要全部都取消了&#xff1f;&#x1f447; 为什么加这个提示&#xff1f; 我是在2022年发布的这个开源项目&#xff0c;并…

算法排序之冒泡排序及优化

public class Bubbling {public static void main(String[] args) {// 定义需要排序的数组int[] arr {0,1,21,2,31,12,5,8};// 冒泡排序方法bubbleSort(arr);bubbleOptSort(arr);}/*** 冒泡排序* param arr 数组*/public static void bubbleSort(int[] arr){// i0&#xff0c;…

Python编程环境搭建

简介&#xff1a; Python环境安装比较简单&#xff0c;无需安装其它依赖环境&#xff0c;主要步骤为&#xff1a; 1. 下载并安装Python对应版本解释器 2. 下载并安装一个ide编码工具 一、下载并安装Python解释器 1.1 下载 官网地址&#xff1a;Welcome to Python.org 选择…

Java云HIS医院管理系统源码 B/S架构 一体化电子病历系统源码 基于云端SaaS平台源码,采用B/S(Browser/Server)架构

“云”指系统采用云计算的技术和建设模式&#xff0c;具有可扩展、易共享、区域化、易协同、低成本、易维护、体验好的优势。“H”是医疗卫生&#xff0c;由原来医院 (Hospital)到现在的医疗卫生 (Healthcare)&#xff0c;拓展了 H的内涵与外延。云 HIS 重新定义了医院信息系统…

【笔记】为什么不同硬件的1T实际硬盘容量硬盘是954GB或者931GB?

问题描述 不管是电脑还是移动硬盘&#xff0c;厂家描述的1T硬盘容量都不是计算机知识领域内真正的1T大小&#xff0c;硬盘容量实际是小于1TB的。 另外还发现对于1TB的不同厂家设备有着实际不同的磁盘容量&#xff0c;比如为什么有的1T电脑硬盘是954GB&#xff0c;而移动硬盘是…