css实现文字倒影悬浮弹出动画效果代码-html代码-BFW代码库

css实现文字倒影悬浮弹出动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现文字倒影悬浮弹出动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@200&display=swap" rel="stylesheet">



    <style>
        .overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 30vh;
          z-index: 100;
          background: white;
          background: linear-gradient(0deg, white 75%, rgba(255, 255, 255, 0.9) 80%, rgba(255, 255, 255, 0.25) 95%, rgba(255, 255, 255, 0) 100%);
        }
        
        .text {
          font-family: "Yanone Kaffeesatz";
          font-size: 100px;
          display: flex;
          position: absolute;
          bottom: 20vh;
          left: 50%;
          transform: translateX(-50%);
          user-select: none;
        }
        .text .wrapper {
          padding-left: 20px;
          padding-right: 20px;
          padding-top: 20px;
        }
        .text .wrapper .letter {
          transition: ease-out 1s;
          transform: translateY(40%);
        }
        .text .wrapper .shadow {
          transform: scale(1, -1);
          color: #999;
          transition: ease-in 5s, ease-out 5s;
        }
        .text .wrapper:hover .letter {
          transform: translateY(-200%);
        }
        .text .wrapper:hover .shadow {
          opacity: 0;
          transform: translateY(200%);
        }
    </style>



</head>

<body>
    <!-- #CodePenChallenge: Lightness -->

    <div class="overlay"></div>

    <div class="text">
        <div class="wrapper">
            <div id="L" class="letter&q.........完整代码请登录后点击上方下载按钮下载查看