css实现三维尖刺旋转动画效果代码-html代码-BFW代码库

css实现三维尖刺旋转动画效果代码

代码语言：html

所属分类：三维

代码描述：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-color: #111;
          color: #fff;
          min-height: 100vh;
          display: grid;
          place-items: center;
          perspective: 750px;
        }
        
        *:not(:empty) {
          transform-style: preserve-3d;
        }
        
        .spikes {
          position: relative;
          -webkit-animation: sphereRotate 30s infinite linear;
                  animation: sphereRotate 30s infinite linear;
        }
        @-webkit-keyframes sphereRotate {
          from {
            transform: rotateY(0deg) rotateZ(0deg);
          }
          to {
            transform: rotateY(360deg) rotateZ(360deg);
          }
        }
        @keyframes sphereRotate {
          from {
            transform: rotateY(0deg) rotateZ(0deg);
          }
          to {
            transform: rotateY(360deg) rotateZ(360deg);
          }
        }
        
        .hemisphere {
          position: absolute;
          transform: translateY(-130.4px);
        }
        .hemisphere:nth-child(2) {
          transform: rotateZ(180deg) rotateY(36deg) translateY(-130.4px);
        }
        
        .pentagon {
          position: absolute;
        }
        .pentagon:nth-child(2) {
          transform: rotateY(0turn) translateZ(116.8px) rotateY(180deg) translateY(72px) rotateX(63.5deg);
        }
        .pentagon:nth-child(5) {
          bottom: 0;
        }
        .pentagon:nth-child(3) {
          transform: rotateY(0.2turn) translateZ(116.8px) rotateY(180deg) translateY(72px) rotateX(63.5deg);
        }
        .pentagon:nth-child(6) {
          bottom: 0;
        }
        .pentagon:nth-child(4) {
          transform: rotateY(0.4turn) translateZ(116.8px) rotateY(180deg) translateY(72px) rotateX(63.5deg);
        }
        .pentagon:nth-child(7) {
          bottom: 0;
        }
        .pentagon:nth-child(5) {
          transform: rotateY(0.6turn) translateZ(116.8px) rotateY(180deg) translateY(72px) rotateX(63.5deg);
        }
        .pentagon:nth-child(8) {
          bottom: 0;
        }
        .pentagon:nth-child(6) {
          transform: rotateY(0.8turn) translateZ(116.8px) rotateY(180deg) translateY(72px) rotateX(63.5deg);
        }
        .pentagon:nth-child(9) {
          bottom: 0;
        }
        
        .triangle {
          position: absolute;
        }
        .triangle:nth-child(1) {
          transform: rotateY(0deg) rotateX(52.5deg) translateY(46px);
          --light: 70%;
        }
        .triangle:nth-child(2) {
          transform: rotateY(72deg) rotateX(52.5deg) translateY(46px);
          --light: 76%;
        }
        .triangle:nth-child(3) {
          transform: rotateY(144deg) rotateX(52.5deg) translateY(46px);
          --light: 82%;
        }
        .triangle:nth-child(4) {
          transform: rotateY(216deg) rotateX(52.5deg) translateY(46px);
          --light: 88%;
        }
        .triangle:nth-child(5) {
          transform: rotateY(288deg) rotateX(52.5deg) translateY(46px);
          --light: 94%;
        }
        
        .side {
          position: absolute;
          left: 50%;
          top: 50%;
          width: 80px;
          height: 16px;
          transform-style: preserve-3d;
        }
        .side:nth-child(1) {
          transform: translate(-50%, -50%) rotateZ(0deg) translateY(15.04px);
        }
        .side:nth-child(2) {
          transform: translate(-50%, -50%) rotateZ(120deg) translateY(15.04px);
        }
        .side:nth-child(3) {
          transform: transl.........完整代码请登录后点击上方下载按钮下载查看