HTML+CSS+JS实现 ❤️响应式团队❤️

心已赠人 2022-09-10 06:17 197阅读 0赞

> ##  效果演示： ##

![20210905231039955.gif][]

> ##    代码目录： ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16][]

> ## 主要代码实现： ##

### CSS样式： ###

body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f7f7f7;
    }
    
    .section-heading {
        font-family: "Dancing Script", cursive;
        text-align: center;
        font-size: 64px;
        color: #10996d;
        margin: 0 0 70px;
    }
    
    .container {
        display: flex;
        justify-content: center;
        width: 90%;
        max-width: 1440px;
        margin: 0 auto;
    }
    
    .profile {
        position: relative;
        transition: all 0.3s;
    }
    
    .profile:hover {
        transform: translateY(25px);
    }
    
    .profile img {
        max-width: 100%;
        border-radius: 50%;
        border: 5px solid #f7f7f7;
        filter: drop-shadow(-20px 0 10px rgba(0, 0, 0, 0.1));
        cursor: pointer;
    }
    
    .profile:not(:first-child) img {
        margin-left: -20px;
    }
    
    .profile .name {
        position: absolute;
        background-color: #10996d;
        color: #fff;
        font-family: "Bebas Neue", cursive;
        padding: 15px 30px;
        border-radius: 100px;
        bottom: -80px;
        left: 50%;
        white-space: nowrap;
        transform: translate(-50%, -50px);
        letter-spacing: 1px;
        font-size: 20px;
        opacity: 0;
        transition: all 0.3s;
    }
    
    .profile .name::before {
        content: "";
        position: absolute;
        width: 15px;
        height: 15px;
        background-color: #10996d;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    
    .profile img:hover+.name {
        opacity: 1;
        transform: translateX(-50%);
        box-shadow: 0 10px 20px rgba(86, 86, 198, 0.3);
    }

### 部分HTML代码 : ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Team Profile Hover Effect</title>
    
        <link rel="stylesheet" href="css/style.css">
    
    </head>
    
    <body>
    
        <section class="team">
            <h2 class="section-heading">响应式团队</h2>
            <div class="container">
                <div class="profile">
                    <img src="img/1.jpg" alt="" /><span class="name">Kalyan</span>
                </div>
                <div class="profile">
                    <img src="img/2.jpg" alt="" /><span class="name">Suchitra Tiwari</span>
                </div>
    
                <div class="profile">
                    <img src="img/3.jpg" alt="" /><span class="name">Sajid Ghani</span>
                </div>
                <div class="profile">
                    <img src="img/4.jpg" alt="" /><span class="name">Dhriti</span>
                </div>
                <div class="profile">
                    <img src="img/5.jpg" alt="" /><span class="name">Milind</span>
                </div>
                <div class="profile">
                    <img src="img/6.jpg" alt="" /><span class="name">Srikant Tiwari</span>
                </div>
                <div class="profile">
                    <img src="img/7.jpg" alt="" /><span class="name">Major Sameer</span>
                </div>
            </div>
        </section>
    
    
    </body>
    
    </html>

上面的img图片等需要引入即可运行

> ## 源码获取 ##
> 
> 查看博主主页或私信博主获取
> 
> 精彩推荐更新中：
> 
> ### [HTML5大作业实战100套][HTML5_100] ###

>   打卡 文章 更新**  39  **/  100天
> 
> 大家可以**点赞、收藏、关注、评论**我啦 、需要完整文件随时联系我或交流哟~！

![在这里插入图片描述][8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]

[20210905231039955.gif]: /images/20220829/e393795179974f17ab600c62d193829c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/dff8ce206b734ff98de4d91b24d716ce.png
[HTML5_100]: https://blog.csdn.net/weixin_39709134/category_11287267.html
[8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]: /images/20220829/e310ca44cb604bb99477eae4ae4e6dc6.png