在这篇文章中，我们将一起学习如何仅使用HTML&CSS创建一个非常漂亮的个人资料卡。
个人资料卡可以让您在网站上的所有项目上效果一致地显示个人资料信息。或称软UI，是一种混合背景颜色、形状、渐变、高光和阴影的可见样式。
      在这个程序设计中，有一个具有变形效果的简易资料卡。这张卡片包含个人资料图片、社交媒体按钮和一些社交媒体信息。当你将鼠标悬停在特定的社交媒体按钮上时，会显示一种变形效果。
这张卡片完全基于HTML和CSS，完整源码下载地址在文章最底部，#号换成啥，前面加上啥，应该不用说，都懂吧。

老规矩，还是先看一下最终效果：

     这是一个纯 CSS 程序，这意味着只使用 HTML 和 CSS 来创建这张卡片和形态效果。
       如果您喜欢这张卡并想获得该程序的源代码，那么你可以轻松复制该程序的代码或者文章底部的链接下载完整文件。你可以在你的网站、项目和 HTML 页面上自由使用此卡片。

个人资料卡 UI 设计 [源代码]

要创建这个资料卡。首先，你需要创建两个文件，一个是 HTML 文件，另一个是 CSS 文件。创建这些文件后，只需将以下代码粘贴到你的文件中即可。首先，创建一个名为 index.html 的 HTML 文件，并将给定的代码粘贴到您的 HTML 文件中。（注意：a076d05399.js这个文件是页面上那几个社交媒体图标文件，如果你不需要这个图标，可以删除这段<script src="a076d05399.js"></script>代码，如果你下载了源码，压缩包里面已经包含了这个文件）

其次，创建一个名为 style.css 的 CSS 文件，并将给定的代码粘贴到您的 CSS 文件中。

现在你已经成功地仅使用 HTML 和 CSS 创建了一个非常漂亮的个人资料卡 UI 设计。如果你的代码不起作用或者您遇到任何错误问题，请从下面的下载链接下载源代码文件。免费的，下载后是一个 .zip 的压缩文件，非常小。解压缩以后就可以尽情的使用和修改了。

下载地址：:#pan.xunlei.com/s/VNRrg0q1t198MoEuoOnxYyePA1   提取码：xuye

备用下载地址 ：:#url62.ctfile.com/f/36531862-834352292-5228c5  提取码: 7836

#号换成啥，前面加上啥，应该不用说，都懂吧。