用户社交信息交互卡片怎么写,用户交互行为

效果展示 CSS 知识点 CSS 基础知识回顾transition-delay 属性的运用 整体页面布局实现

<div classcard>  <div classuser>    <div classimg_box>      <img srcbg.jpg />    </div>    <div classcontent>      <h2>        Someone Famous        <br />        <span>Product Designer</span>      </h2>    </div>    <span classtoggle></span>  </div>  <ul classcontact>    <li style--clr: #c71610;--i:0>      <a href#>        <div classicon_box>          <i classfa-solid fa-envelope></i>        </div>        <p>someoneemail.com</p>      </a>    </li>    <li style--clr: #171515;--i:1>      <a href#>        <div classicon_box>          <i classfa-brands fa-weixin></i>        </div>        <p>18372876781</p>      </a>    </li>    <li style--clr: #0a66c2;--i:2>      <a href#>        <div classicon_box>          <i classfa-brands fa-qq></i>        </div>        <p>38572913</p>      </a>    </li>  </ul></div>

实现整体用户卡片样式

.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;}

实现用户头像样式

.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;}

实现用户信息部分样式

.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;}

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

.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 实现按钮交互事件

let toggle  document.querySelector(.toggle);let card  document.querySelector(.card);toggle.onclick  () > {  card.classList.toggle(active);};

编写社交项的样式

.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;}/* 剩余样式在完整代码中展示 */

编写卡片激活后的样式

/* 只是展示部分样式 */.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);}

完整代码下载

完整代码下载