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.........完整代码请登录后点击上方下载按钮下载查看