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

代码语言：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));
        }
        .rainbow i:nth-child(1) {
          --translateZ: -10px;
          --light: 24%;
        }
        .rainbow i:nth-child(2) {
          --translateZ: -9px;
          --light: 28%;
        }
        .rainbow i:nth-child(3) {
          --translateZ: -8px;
          --light: 32%;
        }
        .rainbow i:nth-child(4) {
          --translateZ: -7px;
          --light: 36%;
        }
        .rainbow i:nth-child(5) {
          --translateZ: -6px;
          --light: 40%;
        }
        .rainbow i:nth-child(6) {
          --translateZ: -5px;
          --light: 44%;
        }
        .rainbow i:nth-child(7) {
          --translateZ: -4px;
          --light: 48%;
        }
        .rainbow i:nth-child(8) {
          --translateZ: -3px;
          --light: 52%;
        }
        .rainbow i:nth-child(9) {
          --translateZ: -2px;
          --light: 56%;
        }
        .rainbow i:nth-child(10) {
          --translateZ: -1px;
          --light: 60%;
        }
        .rainbow i:nth-child(11) {
          --translateZ: 0px;
          --light: 64%;
        }
        .rainbow i:nth-child(12) {
          --translateZ: 1px;
          --light: 68%;
        }
        
        .cloud {
          position: absolute;
        }
        .cloud i {
          position: absolute;
          inset: -60px;
          background: radial-gradient(closest-side, #fff, transparent);
          transition: transform 0.5s ease-out;
        }
        .cloud i:nth-child(1) {
          transform: rotateY(290deg) translateZ(17px) rotateY(-290deg) rotateY(calc(var(--x, 0) * -120deg)) rotateX(calc(var(--y, 0) * 20deg)) scale(1.03);
        }
        .cloud i:nth-child(2) {
          transform: rotateY(57deg) translateZ(22px) rotateY(-57deg) rotateY(calc(var(--x, 0) * -120deg)) rotateX(calc(var(--y, 0) * 20deg)) scale(0.92);
        }
        .cloud i:nth-child(3) {
          transform: rotateY(240deg) translateZ(48px) rotateY(-240deg) rotateY(calc(var(--x, 0) * -120deg)) rotateX(calc(var(--y, 0) * 20deg)) scale(1.1);
        }
        .cloud i:nth-child(4) {
          transform: rotateY(246deg) translateZ(41px) rotateY(-246deg) rotateY(calc(var(--x, 0) * -120deg)) rotateX(calc(var(--y, 0) * 20deg)) scale(1.37);
        }
        .cloud i:nth-child(5) {
          transform: rotateY(39deg) translateZ(3px) rotateY(-39deg) rotateY(calc(var(--x, 0) * -120deg)) rotateX(calc(var(--y, 0) * 20deg)) scale(0.75);
        }
        .cloud i:nth-child(6) {
          transform: rotateY(154deg) translateZ(37px) rotateY(-154deg) rotateY(calc(var(--x, 0) * -120deg)) rotateX(calc(var(--y, 0) * 20deg)) scale(1.1);
        }
        .cloud i:nth-child(7) {
          transform: rotateY(132deg) translateZ(117px) rotateY(-132deg) rotateY(calc(var(--x, 0) * -120deg)) rotateX(calc(var(--y, 0) * 20deg)) scale(0.83);
        }
        .cloud i:nth-child(8) {
          transform: rotateY(287deg) translateZ(98px) rotateY(-287deg) rotateY(calc(var(--x, 0) * -120deg)) rotateX(calc(var(--y, 0) * 20deg)) scale(1.5);
        }
        .cloud i:nth-child(9) {
          transform: rotateY(262deg) translateZ(6px) rotateY(-262deg) rotateY(calc(var(--x, 0) * -120deg)) rotateX(calc(var(--y, 0) * 20deg)) scale(0.83);
        }
        .cloud i:nth-child(10) {
          transform: rotateY(86deg) translateZ(98px) rot.........完整代码请登录后点击上方下载按钮下载查看