css+div实现横向团队人物介绍鼠标悬浮动画点击弹出文字效果代码-html代码-BFW代码库

代码语言：html
所属分类：悬停
代码描述：css+div实现横向团队人物介绍鼠标悬浮动画点击弹出文字效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');

/*
=====
TEAMY CORE STYLES
=====
*/

.teamy__layout{
        position: relative;
        overflow: hidden;
        isolation: isolate;
}

.teamy__layout::before{
        content: "";
        background-color: var(--teamy-back-background-color, rgba(0, 0, 0, .7));
        opacity: 0;

        position: absolute;
        z-index: 1;
}

.teamy__avatar{
        display: block;
        block-size: 100%;
        inline-size: 100%;
        object-fit: cover;
}

.teamy__back{
        display: flex;
        padding: var(--teamy-back-padding, 1.25rem);

        position: absolute;
        inset: 0; 
        z-index: 1;
}

.teamy__back-content{
        opacity: 0;
        margin: auto;
}

.teamy__back-content:focus-within,
.teamy:hover .teamy__back-content{
        opacity: 1;
}

/*
=====
TEAMY MASKS BASICS
=====
*/

/* circle */

.teamy_mask-circle .teamy__layout::before{
        block-size: 100%;
        aspect-ratio: 1 / 1;
        clip-path: circle(50% at 50% 50%);
}

/* triangle */

.teamy_mask-triangle .teamy__layout::before{
        block-size: 100%;
        inline-size: 100%;
        clip-path: polygon(0 100%, 50% 0, 50% 0, 100% 100%);
}

.teamy_mask-triangle:hover .teamy__layout::before,
.teamy_mask-triangle:focus-within .teamy__layout::before{
        opacity: 1;
}

/*
=====
TEAMY MASKS VARIETIES
=====
*/

/* circle */

.teamy_mask-circle .teamy__layout::before{
        transform: translate(-50%, -50%) scale(0);
        inset-block-start: 50%;
        inset-inline-start: 50%;
}

.teamy_mask-circle:hover .teamy__layout::before,
.teamy_mask-circle:focus-within .teamy__layout::before{
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3);
}

/* triangle */

.teamy_mask-triangle .teamy__layout::before{
        inset-block-end: 0;
        inset-inline-start: 0;
}

/*
=====
TEAMY ANIMATIONS
=====
*/

@media (prefers-reduced-motion: no-preference){

        /* circle */

        .teamy_mask-circle .teamy__layout::before{
                transition: transform .3s ease, opacity .3s ease-out;
                will-change: opacity, transform;
        }

        .teamy_mask-circle:hover .teamy__layout::before,
        .teamy_mask-circle:focus-within .teamy__layout::before{
                transition-duration: .6s;
        }

        /* triangle */

        .teamy_mask-triangle .teamy__layout::before{
                transition-property: clip-path, opacity;
                transition-duration: .2s, .4s;
                transition-delay: .4s, 0s;
                transition-timing-function: ease-out;

                will-change: clip-path, opacity;
        }

        .teamy_mask-triangle:hover .teamy__layout::before,
        .teamy_mask-triangle:focus-within .teamy__layout::before{
                clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
                transition-delay: 0s;
                transition-duration: .4s;
        }

        /* zoom preview */

        .teamy_zoom-photo .teamy__avatar{
                transition: transform .4s cubic-bezier(0.71, 0.05, 0.29, 0.9);
                will-change: transform;
                transform: scale(1);
        }

        .teamy_zoom-photo:hover .teamy__avatar,
        .teamy_zoom-photo:focus-within .teamy__avatar{
                transform: scale(1.2);
        }

        /* zoom and rotate preview */

        .teamy_zoom-rotate-photo .teamy__avatar{
                transition: transform .4s cubic-bezier(0.71, 0.05, 0.29, 0.9);
                will-change: transform;
                transform: scale(1) rotate(0);
        }

        .teamy_zoom-rotate-photo:hover .teamy__avatar,
        .teamy_zoom-rotate-photo:focus-within .teamy__avatar{
                transform: scale(1.2) rotate(5deg);
        }

        /* zoom and slide preview */

        .teamy_zoom-slide-photo .teamy__avatar{
                transition: transform .4s cubic-bezier(0.71, 0.05, 0.29, 0.9);
                will-change: transform;
                transform: scale(1) translate(0, 0);
        }

        .teamy_zoom-slide-photo:hover .teamy__avatar,
        .teamy_zoom-slide-photo:focus-within .teamy__avatar{
                transform: scale(1.2) translate(4%, 4%);
        }

        /* content animation */

        .teamy__back-content:focus-within,
        .teamy:hover .teamy__back-content{
                transition: opacity .4s cubic-bezier(0.71, 0.05, 0.29, 0.9) .2s;
        }
}

/*
=====
SCROLLER CORE STYLE
=====
*/

.scroller{
        display: var(--scroller-display, flex);
        overflow: var(--scroller-overflow-x, auto) var(--scroller-overflow-y, auto);
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: var(--scroller-overscroll-behavior, contain);
        scroll-snap-type: var(--scroller-scroll-snap-type, x mandatory);
}

.scroller__item{
        inline-size: var(--ui-scroller-item-inline-size, calc(100% / var(--scroller-visible-items-number, 1)));
        flex: none;
        scroll-snap-align: var(--scroller-scroll-snap-align, start);
}

/*
=====
DEMO
=====
*/

:root{
        --teamy-back-background-color: rgba(72, 27, 174, .7);
        --ui-button-background-color: #292548;
        --ui-button-font-size: .75rem;
        --ui-button-border-radius: 1rem;
        --ui-button-padding: .5rem 1.5rem;
        --scroller-overflow-x: auto;
        --scroller-overflow-y: hidden;
}

body {
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
        line-height: 1.75;
        background-color: #292548;
        color: #222;
        margin: 0;
}

h1, h2, h3, h4 {
        letter-spacing: 1px;
        font-family: 'Cherry Bomb One', cursive;
}
#popup-article{
        top: 0;
    position: fixed;
    margin: 0;
    padding: 0;
    right: 0;
    left: 0;
}
.r-button{
        background-color: var(--r-button-background-color, transparent);
        padding: var(--r-button-padding, 0);
        border:
                var(--r-button-border-width, 0)
                var(--r-button-border-style, solid)
                var(--r-button-border-color, currentColor);

        font-family: var(--r-button-font-family, inherit);
        font-size: var(--r-button-font-size, inherit);
}

.r-button:focus{
        outline: none;
}

.r-button::-moz-focus-inner,
.r-button[type="button"]::-moz-focus-inner,
.r-button[type="reset"]::-moz-focus-inner,
.r-button[type="submit"]::-moz-focus-inner {
        --r-button-border-style: none;
        --r-button-padding: 0;
}

.r-link{
    display: var(--r-link-display, inline-flex);
}

.r-link[href]{
    color: var(--r-link-color);
    text-decoration: var(--r-link-text-decoration, none);
}

.r-link:focus{
        outline: none;
}

.button{
        display: var(--ui-button-display, inline-flex);
        padding: var(--ui-button-padding,
                var(--ui-button-padding-block-start, .25rem)
                var(--ui-button-padding-inline-end, .25rem)
                var(--ui-button-padding-block-end, .25rem)
                var(--ui-button-padding-inline-start, .25rem)
        );
        background-color: var(--ui-button-background-color);
        border: var(--ui-button-border-width) var(--ui-button-border-style, solid) var(--ui-button-border-color, currentColor);
        border-radius: var(--ui-button-border-radius);
        cursor: var(--ui-button-cursor, pointer);

        font-family: var(--ui-button-font-family);
        font-size: var(--ui-button-font-size);
        color: var(--ui-button-color);
        text-transform: var(--ui-button-text-transform, uppercase);
}

:focus .button{
        outline: var(--ha-outline-width, 3px) var(--ha-outline-style, solid) var(--ha-outline-color, currentColor);
        outline-offset: var(--ha-outline-offset, 0);
} 

.teamy{
        --ui-button-color: #fefefe;
        --ui-button-font-family: 'Cherry Bomb One', cursive;
        
        display: flex;
        flex-direction: column;
        
        color: #fefefe;
        text-align: center;
}

.teamy__content{
        padding: 1.25rem;
        order: 1;
}

.teamy__name{
        display: block;
        font-family: 'Cherry Bomb One', cursive;
        font-size: 2rem;
        letter-spacing: 1px;
}

.teamy__post{
        display: block;
        text-transform: uppercase;
        font-size: .75rem;
}

@media (max-width: 480px){

        .teamy-team{
                --scroller-visible-items-number: 1.2;
        }
}

@media (min-width: 481px) and (max-width: 767px){

        .teamy-team{
                --scroller-visible-items-number: 1.8;
        }
}

@media (min-width: 768px) and (max-width: 1024px){

        .teamy-team{
                --scroller-visible-items-number: 2.8;
        }
}

@media (min-width: 1025px){

        .teamy-team{
                --scroller-visible-items-number: .........完整代码请登录后点击上方下载按钮下载查看