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