css实现鼠标跟随文字x光透视效果代码-html代码-BFW代码库

css实现鼠标跟随文字x光透视效果代码

代码语言：html

所属分类：其他

代码描述：css实现鼠标跟随文字x光透视效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        * {
          font-family: sans-serif;
          letter-spacing: -5px;
          cursor: grabbing;
          margin: 0;
          box-sizing: border-box;
          position: absolute;
        }
        * ::selection {
          background: none;
        }
        
        body {
          background: #3590f3;
          overflow: hidden;
        }
        
        span {
          width: 100vw;
          font-size: 5rem;
          font-weight: bold;
          line-height: 4rem;
          word-break: break-all;
          text-align: center;
        }
        span.fill {
          color: #fff;
          z-index: 0;
        }
        span.outline {
          color: transparent;
          -webkit-text-stroke: 0.5px #fff;
          z-index: 2;
        }
        
        #circle {
          height: 200px;
          width: 200px;
          border-radius: 50%;
          background: #3590f3;
          border: 15px solid #fff;
          box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
          top: calc(50vh - 100px);
          left: calc(50vw - 100px);
        }
    </style>



</head>

<body>
    <span class="fill">MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE OVER THIS TEXT. MOVE THE CIRCLE .........完整代码请登录后点击上方下载按钮下载查看