splitting实现图片卡片悬浮文字显示动画效果代码-html代码-BFW代码库

splitting实现图片卡片悬浮文字显示动画效果代码

代码语言：html

所属分类：悬停

代码描述：splitting实现图片卡片悬浮文字显示动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
        :root {
          --cover-timing: 0.5s;
          --cover-ease: cubic-bezier(0.66, 0.08, 0.19, 0.97);
          --cover-stagger: 0.15s;
          --text-timing: .75s;
          --text-stagger: 0.015s;
          --text-ease: cubic-bezier(0.38, 0.26, 0.05, 1.07);
          --title-stagger: 0.05s;
          --highlight: white;
        }
        
        .card {
          position: relative;
          overflow: hidden;
          aspect-ratio: 9/12;
          display: flex;
          flex-direction: column;
          border-radius: 7px;
          box-shadow: rgba(255, 255, 255, 0.3) 0 5vw 6vw -8vw, rgba(255, 255, 255, 0) 0 4.5vw 5vw -6vw, rgba(50, 50, 80, 0.5) 0px 4vw 8vw -2vw, rgba(0, 0, 0, 0.8) 0px 4vw 5vw -3vw;
          transition: box-shadow 1s var(--cover-ease);
        }
        .card > * {
          z-index: 2;
        }
        .card > img {
          z-index: 0;
          transition: all 0.8s cubic-bezier(0.66, 0.08, 0.19, 0.97);
        }
        .card::before, .card::after {
          content: "";
          width: 100%;
          height: 50%;
          top: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.5);
          position: absolute;
          transform-origin: left;
          transform: scaleX(0);
          transition: all var(--cover-timing) var(--cover-ease);
          z-index: 1;
        }
        .card::after {
          transition-delay: var(--cover-stagger);
          top: 50%;
        }
        .card:hover {
          box-shadow: white 0 5vw 6vw -9vw, var(--highlight) 0 5.5vw 5vw -7.5vw, rgba(50, 50, 80, 0.5) 0px 4vw 8vw -2vw, rgba(0, 0, 0, 0.8) 0px 4vw 5vw -3vw;
        }
        .card:hover::before, .card:hover::after {
          transform: scaleX(1);
        }
        .card:hover h2 .char, .card:hover p .word {
          opacity: 1;
          transform: translateY(0);
          color: inherit;
        }
        .card:hover h2 .char {
          transition-delay: calc(0.1s + var(--char-index) * var(--title-stagger));
        }
        .card:hover p .word {
          transition-delay: calc(0.1s + var(--word-index) * var(--text-stagger));
        }
        .card:hover img {
          transform: scale(1.1);
        }
        .card:nth-of-type(1) {
          --highlight: coral;
        }
        .card:nth-of-type(2) {
          --highlight: #56ffe5;
        }
        
        .text {
          position: absolute;
          inset: 20px;
          top: auto;
        }
        
        h2 {
          font-size: 30px;
          font-size: clamp(20px, 4vw, 40px);
          font-weight: 800;
          margin-bottom: 0.2em;
        }
        
        p {
          font-size: 12px;
          font-size: clamp(10px, 1.25vw, 14px);
          line-height: 1.4;
          text-align: justify;
          margin-top: 0.2em;
          margin-bottom: 0;
        }
        
        h2 .char,
        p .word {
          color: var(--highlight);
          display: inline-block;
          opacity: 0;
          p.........完整代码请登录后点击上方下载按钮下载查看