用户社交信息交互卡片

效果展示

CSS 知识点

  • CSS 基础知识回顾
  • transition-delay 属性的运用

整体页面布局实现

html 复制代码
<div class="card">
  <div class="user">
    <div class="img_box">
      <img src="bg.jpg" />
    </div>
    <div class="content">
      <h2>
        Someone Famous
        <br />
        <span>Product Designer</span>
      </h2>
    </div>
    <span class="toggle"></span>
  </div>
  <ul class="contact">
    <li style="--clr: #c71610;--i:0">
      <a href="#">
        <div class="icon_box">
          <i class="fa-solid fa-envelope"></i>
        </div>
        <p>someone@email.com</p>
      </a>
    </li>
    <li style="--clr: #171515;--i:1">
      <a href="#">
        <div class="icon_box">
          <i class="fa-brands fa-weixin"></i>
        </div>
        <p>18372876781</p>
      </a>
    </li>
    <li style="--clr: #0a66c2;--i:2">
      <a href="#">
        <div class="icon_box">
          <i class="fa-brands fa-qq"></i>
        </div>
        <p>38572913</p>
      </a>
    </li>
  </ul>
</div>

实现整体用户卡片样式

css 复制代码
.card {
  position: relative;
  height: 100px;
  transition: 0.5s;
  transition-delay: 0.5s;
}

.card .user {
  position: relative;
  width: 400px;
  min-height: 150px;
  background: #2196f3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  border-radius: 10px;
  padding: 60px 40px 30px;
}

实现用户头像样式

css 复制代码
.card .user .img_box {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 6px solid #fff;
  overflow: hidden;
  transition: 0.5s;
  z-index: 10;
}

.card .user .img_box img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

实现用户信息部分样式

css 复制代码
.card .user .content {
  position: relative;
  text-align: center;
}

.card .user .content h2 {
  font-size: 1.2em;
  line-height: 1.05;
  color: #fff;
}

.card .user .content h2 span {
  font-size: 0.75em;
  font-weight: 400;
}

实现用户社交信息展示的按钮样式

css 复制代码
.card .user .toggle {
  position: absolute;
  bottom: 0;
  width: 120px;
  padding: 5px 15px;
  background: #fff;
  border-radius: 30px;
  transform: translateY(50%);
  border: 6px solid var(--bg);
  text-align: center;
  cursor: pointer;
  font-weight: 500;
  transition: 0.5s;
}

.card .user .toggle::before {
  content: "Hire me";
}

使用 JavaScript 实现按钮交互事件

javascript 复制代码
let toggle = document.querySelector(".toggle");
let card = document.querySelector(".card");

toggle.onclick = () => {
  card.classList.toggle("active");
};

编写社交项的样式

css 复制代码
.card .contact {
  position: relative;
  top: 30px;
  width: 100%;
  height: 0;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  gap: 10px;
  transition: 0.5s;
}

.card .contact li {
  list-style: none;
  width: 100%;
  min-height: 100px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  transition: 0.5s;
  opacity: 0;
  transform: scale(0);
  padding: 10px 30px;
}

/* 剩余样式在完整代码中展示 */

编写卡片激活后的样式

css 复制代码
/* 只是展示部分样式 */

.card.active {
  height: 450px;
  transition-delay: 0;
}

.card.active .user .toggle {
  background: #ff4383;
  color: #fff;
}

.card.active .contact {
  height: 325px;
}

.card.active .contact li {
  opacity: 1;
  transform: scale(1);
  transition-delay: calc(0.25s * var(--i));
}

.card.active .contact:hover li {
  opacity: 0.15;
  filter: blur(2px);
  transition-delay: 0s;
}

.card.active .contact li:hover {
  opacity: 1;
  filter: blur(0px);
}

完整代码下载

完整代码下载

相关推荐
软件小伟8 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾29 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧38 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter