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