div+css实现视觉差异鼠标交互彩虹云效果代码-html代码-BFW代码库

div+css实现视觉差异鼠标交互彩虹云效果代码

代码语言：html

代码描述：div+css实现视觉差异鼠标交互彩虹云效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">




    <style>
        *, *::before, *::after {
          padding: 0;
          margin: 0 auto;
          box-sizing: border-box;
        }
        
        body {
          background-image: linear-gradient(skyblue, darkslateblue);
          color: #fff;
          min-height: 100vh;
          display: grid;
          place-items: center;
          perspective: 800px;
          overflow: hidden;
        }
        body *:not(:empty) {
          transform-style: preserve-3d;
        }
        
        .scene {
          position: relative;
          transform: rotateX(calc(var(--y, 0) * -20deg)) rotateY(calc(var(--x, 0) * 120deg));
          transition: transform 0.5s ease-out;
        }
        
        .rainbow {
          position: absolute;
          inset: -360px;
          transform: translateY(80px);
        }
        .rainbow i {
          position: absolute;
          inset: 0;
          -webkit-mask: conic-gradient(from 10deg, white, transparent 90deg 270deg, white);
                  mask: conic-gradient(from 10deg, white, transparent 90deg 270deg, white);
          background: radial-gradient(transparent 210px, hsl(270, 100%, var(--light)), transparent 225px, hsl(230, 100%, var(--light)), transparent 240px, hsl(185, 100%, var(--light)), transparent 255px, hsl(135, 100%, var(--light)), transparent 270px, hsl(85, 100%, var(--light)), transparent 285px, hsl(40, 100%, var(--light)), transparent 300px, hsl(0, 100%, var(--light)), transparent 315px);
          transform: translateZ(var(--translateZ));
    .........完整代码请登录后点击上方下载按钮下载查看