css实现悬浮聚光灯照射文字阴影效果代码-html代码-BFW代码库

css实现悬浮聚光灯照射文字阴影效果代码

代码语言：html

所属分类：悬停

代码描述：css实现悬浮聚光灯照射文字阴影效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        @import url("https://fonts.googleapis.com/css2?family=Gluten:wght@700&display=swap");
        
        html,
        body {
          height: 100%;
        }
        
        body {
          --color-dark: 210 55% 8%;
          --color-dark-static: 210 55% 25%;
          --color-light: 200 60% 90%;
          --font-size: min(20vw + 1rem, 12rem);
        
          display: grid;
          place-items: center;
          overflow: hidden;
          background-color: hsl(var(--color-dark));
          font-size: var(--font-size);
          font-family: "Gluten", sans-serif;
          perspective: 40em;
        }
        
        .css {
          --rotate: 70deg;
          --transition: 400ms cubic-bezier(0.25, 1, 0.5, 1);
        
          display: flex;
          position: relative;
          top: 0.25em;
          color: hsl(var(--color-dark-accent));
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
          perspective: 2em;
          transform: scale(0.9);
          transform-style: preserve-3d;
          transition: var(--transition);
          transition-property: perspective, transform;
          cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>😘</text></svg>")
              16 0,
            auto;
        }
        
        .css::before,
        .css::after {
          --s: calc(var(--font-size) * 2);
        
          content: "";
          position: absolute;
          left: 50%;
          width: var(--s);
          height: calc(var(--s) / 2);
          background-color: hsl(var(--color-light));
          opacity: 0;
          transform: translateZ(-1vmin) translateX(-50%) scale(0);
          transition: var(--transition);
          transition-property: opacity, transform;
          pointer-events: none;
        }
        
        .css::before {
          bottom: 50%;
          border-top-left-radius: 360px;
          border-top-right-radius: 360px;
          transform-origin: bottom center;
        }
        
        .css::after {
          --s: calc(var(--font-size) * 2);
        
          top: 50%;
          transform-origin: top center;
          transform: translateX(-50%) rotateX(var(--rotate)) scale(0.001);
          background: linear-gradient(
            to bottom,
            h.........完整代码请登录后点击上方下载按钮下载查看