头像展示样式

阅读：评论：0

头像展示样式

先上效果图

再上代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {align-items: center;background-color: #f2f2f2;display: flex;font-family: "Merriweather", serif;flex-wrap: wrap;justify-content: center;height: 100vh;margin: 0;}.person {align-items: center;display: flex;flex-direction: column;width: 280px;}.container {border-radius: 50%;height: 312px;-webkit-tap-highlight-color: transparent;transform: scale(0.48);transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);width: 400px;}.container:after {background-color: #f2f2f2;content: "";height: 10px;position: absolute;top: 390px;width: 100%;}.container:hover {transform: scale(0.54);}.container-inner {clip-path: path("M 390,400 C 390,504.9341 304.9341,590 200,590 95.065898,590 10,504.9341 10,400 V 10 H 200 390 Z");position: relative;transform-origin: 50%;top: -200px;}.circle {background-color: #fee7d3;border-radius: 50%;cursor: pointer;height: 380px;left: 10px;pointer-events: none;position: absolute;top: 210px;width: 380px;}.img {pointer-events: none;position: relative;transform: translateY(20px) scale(1.15);transform-origin: 50% bottom;transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);}.container:hover .img {transform: translateY(0) scale(1.2);}.img1 {left: 22px;top: 164px;width: 340px;}.img2 {left: -46px;top: 174px;width: 444px;}.img3 {left: -16px;top: 144px;width: 466px;}.divider {background-color: #ca6060;height: 1px;width: 160px;}.name {color: #404245;font-size: 36px;font-weight: 600;margin-top: 16px;text-align: center;}.title {color: #6e6e6e;font-family: arial;font-size: 14px;font-style: italic;margin-top: 4px;}</style>
</head>
<body>
<div class="person"><div class="container"><div class="container-inner"><imgclass="circle"src="../web/img/women.png"alt="背景"/><imgclass="img img1"src="../web/img/women1.png"alt="人物"/></div></div><div class="divider"></div><div class="name">Alma</div><div class="title">Product Manager</div>
</div>
<div class="person"><div class="container"><div class="container-inner"><imgclass="circle"src="../web/img/wow.png"alt="背景"/><imgclass="img img2"src="../web/img/wow1.png"alt="人物"/></div></div><div class="divider"></div><div class="name">Irma</div><div class="title">Senior Developer</div>
</div>
<div class="person"><div class="container"><div class="container-inner"><imgclass="circle"src="../web/img/man.png"alt="背景"/><imgclass="img img3"src="../web/img/man1.png"alt="人像"/></div></div><div class="divider"></div><div class="name">Anton</div><div class="title">Senior UX</div>
</div>
</body>
</html>

本文发布于:2024-01-27 18:39:28，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/17063519701942.html

上一篇：app头像上传vue

下一篇：uniapp上传头像和最多上传9张demo效果(整理)

标签：样式头像

留言与评论（共有 0 条评论）