css实现彩虹扇子折叠打开三维动画效果代码-html代码-BFW代码库

css实现彩虹扇子折叠打开三维动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现彩虹扇子折叠打开三维动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://fonts.googleapis.com/css2?family=Birthstone&display=swap");
        *, *::before, *::after {
          padding: 0;
          margin: 0 auto;
          box-sizing: border-box;
        }
        
        body {
          font-family: "Birthstone", cursive;
          background-color: #111;
          color: #fff;
          min-height: 100vh;
          display: grid;
          place-items: center;
          perspective: 750px;
          overflow: hidden;
        }
        body *:not(:empty) {
          transform-style: preserve-3d;
        }
        
        input#fan {
          -webkit-appearance: none;
             -moz-appearance: none;
                  appearance: none;
          position: fixed;
        }
        input#fan:checked + .scene > .fan > .fan_leaf {
          --rz: 0deg;
          --ry: 0deg;
          --ty: 0em;
        }
        input#fan:checked + .scene > p {
          --op: 1;
        }
        
        .scene {
          position: relative;
        }
        
        .fan {
          position: absolute;
          width: 1em;
          height: 5em;
          cursor: pointer;
          font-size: 50px;
          -webkit-animation: fanRotate 24s infinite linear;
                  animation: fanRotate 24s infinite linear;
        }
        @-webkit-keyframes fanRotate {
          from {
            transform: translate(-50%, -50%) rotateY(0deg);
          }
          to {
            transform: translate(-50%, -50%) rotateY(360deg);
          }
        }
        @keyframes fanRotate {
          from {
            transform: translate(-50%, -50%) rotateY(0deg);
          }
          to {
            transform: translate(-50%, -50%) rotateY(360deg);
          }
        }
        .fan_leaf {
          position: absolute;
          width: 1em;
          height: 5em;
          border-radius: 1em;
          background-image: conic-gradient(from -5deg at 50% 120%, hsl(var(--hue), 100%, 60%) 0deg, hsl(var(--hue), 100%, 70%) 5deg, hsl(var(--hue), 100%, 65%) 10deg, transparent 10deg);
          transform-origin: 50% 95%;
          transform-style: preserve-3d;
          transform: translateY(var(--ty, -2em)) rotateZ(var(--rz, 0deg)) rotateY(var(--ry, 5deg)) rotateX(var(--rx, 0deg));
          transition: transform 1.5s;
        }
        .fan_leaf::after {
          content: "";
          position: absolute;
          left: 50%;
          width: 0.25em;
          height: 100%;
          background-image: conic-gradient(from -2deg at 50% 100%, hsl(var(--hue), 100%, 70%) 0 4deg, transparent 4deg);
          border-radius: 1em;
          transform: translateX(-50%) rotateY(90deg);
        }
        .fan_leaf:nth-child(1) {
          --rz: 495deg;
          --rx: -8deg;
          --hue: 20;
        }
        .fan_leaf:nth-child(2) {
          --rz: 486.2903225806deg;
          --rx: -7.4838709677deg;
          --hue: 30;
        }
        .fan_leaf:nth-child(3) {
          --rz: 477.5806451613deg;
          --rx: -6.9677419355deg;
          --hue: 40;
        }
        .fan_leaf:nth-child(4) {
          --rz: 468.8709677419deg;
          --rx: -6.4516129032deg;
          --hue: 50;
        }
        .fan_leaf:nth-child(5) {
          --rz: 460.1612903226deg;
          --rx: -5.935483871deg;
          --hue: 60;
        }
        .fan_leaf:nth-child(6) {
          --rz: 451.4516129032deg;
          --rx: -5.4193548387deg;
          --hue: 70;
        }
        .fan_leaf:nth-child(7) {
          --rz: 442.7419354839deg;
          --rx: -4.9032258065deg;
          --hue: 80;
        }
        .fan_leaf:nth-child(8) {
          --rz: 434.0322580645deg;
          --rx: -4.3870967742deg;
          --hue: 90;
        }
        .fan_leaf:nth-child(9) {
          --rz: 425.3225806452deg;
          --rx: -3.8709677419deg;
          --hue: 100;
        }
        .fan_leaf:nth-child(10) {
          --rz: 416.6129032258deg;
          --rx: -3.3548387097deg;
          --hue: 110;
        }
        .fan_leaf:nth-child(11) {
          --rz: 407.9032258065deg;
          --rx: -2.8387096774deg;
          --hue: 120;
        }
        .fan_leaf:nth-child(12) {
          --rz: 399.1935483871deg;
          --rx: -2.3225806452deg;
          --hue: 130;
        }
        .fan_leaf:nth-child(13) {
          --rz: 390.4838709677deg;
          --rx: -1.8064516129deg;
          --hue: 140;
        }
        .fan_leaf:nth-child(14) {
          --rz: 381.7741935484deg;
          --rx: -1.2903225806deg;
          --hue: 150;
        }
        .fan_leaf:nth-child(15) {
.........完整代码请登录后点击上方下载按钮下载查看