html实现人物名片效果

一滴泪

已于 2023-01-05 10:06:36 修改

阅读量1.1k

点赞数

文章标签： css html5 Powered by 金山文档

于 2023-01-05 09:51:14 首次发布

本文链接：https://blog.csdn.net/m0_56938501/article/details/128558041

版权

注意：图片换上自己的路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          *{
                margin: 0;
                padding: 0;
            }
            .body{
                height: 77vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background: linear-gradient(200deg,#517fa4,#243949,);
            }
            .card{
                position: relative;
                width: 300px;
                height: 450px;
                margin: 20px;
                background-color: #758a99;
                border-radius: 20px;
                overflow: hidden;
                display: flex;
                /* // 元素纵向排列 */
                flex-direction: column;
                align-items: center;
                color: #fff;
                box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
                /* // 不让其被挤压 */
                flex-shrink: 0;
            }
            .card .photo img{
                width: 100%;
                height: 100%;
                /* // 保持原有尺寸 */
                object-fit: cover;
            }
            .card .photo{
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                border-radius: 0;
                overflow: hidden;
                /* // 动画过度 */
                transition: 0.5s;
            }
            /* // 鼠标移入之后样式 */
            .card:hover .photo{
                top: 30px;
                width: 120px;
                height: 120px;
                border-radius: 50%;
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
            }
            /* // 加个渐变背景更好看到名字 */
            .card .photo::before{
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                background: linear-gradient(to bottom,transparent 50%,#222);
            }
            .card h1{
                position: absolute;
                top: 370px;
                transition: 0.5s;
            }
            .card:hover h1{
                top: 170px;
            }
            .card h2{
                margin-top: 220px;
                width: 80%;
                border-bottom: 1px solid rgba(255, 255, 255, 0.3);
                font-size: 20px;
                margin-bottom: 20px;
                padding-bottom: 20px;
            }
            .card p{
                width: 90%;
                text-indent: 32px;
                font-size: 16px;
                margin-bottom: 15px;
                line-height: 30px;
            }
            .card a{
                font-size: 14px;
                color: rgba(255, 255, 255, 0.8);
                text-decoration: none;
                border: 1px solid rgba(255, 255, 255, 0.5);
                padding: 8px 32px;
                border-radius: 8px;
            }
            .card a:hover{
                color: #fff;
                background-color: rgba(255,255,255,0.2);
            }
    </style>
</head>
<body>
    <div class="body">
        <div class="card">
          <div class="photo">
            <img src="../../assets/card/a2843abe6e9096163e6ae41318569e53.jpeg" alt="">
          </div>
          <h1>hee</h1>
          <h2>萌妹</h2>
          <p>爱学习的妹纸，温文尔雅，beautiful！</p>
          <a href="#">了解更多</a>
        </div>
    
        <div class="card">
          <div class="photo">
            <img src="../../assets/card/8753141d88e97f72056401fa5b0dc597.jpeg" alt="">
          </div>
          <h1>linn</h1>
          <h2>萝莉</h2>
          <p>喜欢抱着小鸭子，非常非常可爱</p>
          <a href="#">了解更多</a>
        </div>
    
        <div class="card">
          <div class="photo">
            <img src="../../assets/card/6021bcbe83a1745a0dd4a4200206996d.jpeg" alt="">
          </div>
          <h1>zuu</h1>
          <h2>小猪</h2>
          <p>猪猪猪猪猪，拉臭，不爱干净的抠脚大汉一枚</p>
          <a href="#">了解更多</a>
        </div>
      </div>
</body>
</html>