div+css实现一个三维烟嘴效果代码

代码语言:html

所属分类:三维

代码描述:div+css实现一个三维烟嘴效果代码,鼠标移动可旋转。

代码标签: css 三维 烟嘴

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

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

<head>

    <meta charset="UTF-8">




    <style>
        html {
          font-size: 0.97vmin;
        }
        
        @media (min-width: 850px) and (max-width: 1200px) {
          html {
            font-size: 0.8vmin;
          }
        }
        @media (max-width: 950px) {
          rotate {
            transform: translate3d(0, 0, 0) rotate(-20deg) scale(0.9);
          }
        
          text {
            transform: translate3d(15rem, 85rem, 0) !important;
          }
        }
        @media (max-width: 850px) {
          rotate {
            transform: translate3d(-5rem, 0, 0) rotate(-21deg) scale(0.8);
          }
        
          text {
            transform: translate3d(27rem, 82rem, 0) !important;
          }
        }
        @media (max-width: 450px) {
          rotate {
            transform: rotate(-35deg);
          }
        
          text {
            transform: translate3d(24rem, 100rem, 0) !important;
          }
        }
        @media (max-width: 450px) and (max-height: 450px) {
          html {
            font-size: 0.8vmin;
          }
        }
        body {
          margin: auto;
          background: #ead9c9;
          overflow: hidden;
          display: flex;
          flex-wrap: wrap;
        }
        body i,
        body i:before,
        body i:after {
          transform-style: preserve-3d;
          display: block;
          top: 0;
          left: 0;
          box-sizing: border-box;
          position: absolute;
          content: "";
          transition: all 0.5s ease-in-out;
        }
        
        body,
        html {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
        }
        
        art {
          transform-style: preserve-3d;
          perspective: 195rem;
          perspective-origin: 27% -14%;
          height: 100rem;
          width: 100%;
          max-width: 139rem;
        }
        
        xaxis,
        yaxis,
        art,
        rotate {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          transition: transform 0.5s ease-in-out;
          transform-style: preserve-3d;
        }
        
        @media (max-width: 600px) {
          pipe {
            transform: translate3d(12rem, 15rem, 10rem) rotateY(5deg) rotate(-90deg);
          }
        }
        x {
          width: calc(100% / 3);
          height: calc(100% / 3);
          z-index: 1;
        }
        
        .pic x {
          display: none;
        }
        
        body:after {
          content: "";
          top: 0;
          left: 0;
          position: absolute;
          width: 1rem;
          height: 1rem;
          border-radius: 50% 0;
          box-shadow: 42vw 18vh 0 #a06353 , 63vw 18vh 0 #b48072 , 69vw 26vh 0 #a06353 , 4vw 45vh 0 #b48072 , 47vw 62vh 0 #b48072 , 58vw 68vh 0 #b48072 , 59vw 25vh 0 #b48072 , 16vw 1vh 0 #a06353 , 5vw 93vh 0 #b48072 , 23vw 62vh 0 #b48072 , 24vw 81vh 0 #b48072 , 52vw 55vh 0 #b48072 , 26vw 69vh 0 #b48072 , 91vw 48vh 0 #b48072 , 79vw 4vh 0 #a06353 , 38vw 42vh 0 #b48072 , 77vw 26vh 0 #a06353 , 98vw 61vh 0 #a06353 , 90vw 65vh 0 #b48072 , 53vw 65vh 0 #b48072 , 26vw 52vh 0 #a06353 , 30vw 16vh 0 #a06353 , 25vw 58vh 0 #a06353 , 28vw 12vh 0 #a06353 , 9vw 27vh 0 #b48072 , 20vw 60vh 0 #a06353 , 59vw 47vh 0 #a06353 , 33vw 34vh 0 #b48072 , 9vw 46vh 0 #b48072 , 24vw 4vh 0 #b48072 , 96vw 11vh 0 #b48072 , 35vw 22vh 0 #a06353 , 64vw 23vh 0 #b48072 , 33vw 82vh 0 #b48072 , 43vw 30vh 0 #b48072 , 42vw 16vh 0 #a06353 , 48vw 59vh 0 #a06353 , 64vw 49vh 0 #a06353 , 90vw 45vh 0 #b48072 , 45vw 87vh 0 #a06353 , 69vw 27vh 0 #a06353 , 92vw 87vh 0 #b48072 , 17vw 88vh 0 #a06353 , 13vw 73vh 0 #a06353 , 3vw 58vh 0 #b48072 , 9vw 61vh 0 #a06353 , 17vw 45vh 0 #b48072 , 92vw 64vh 0 #b48072 , 60vw 74vh 0 #b48072 , 30vw 87vh 0 #a06353 , 60vw 22vh 0 #b48072 , 85vw 6vh 0 #b48072 , 49vw 66vh 0 #a06353 , 37vw 74vh 0 #a06353 , 6vw 100vh 0 #b48072 , 97vw 36vh 0 #a06353 , 47vw 16vh 0 #b48072 , 57vw 70vh 0 #a06353 , 36vw 15vh 0 #a06353 , 71vw 92vh 0 #a06353 , 80vw 80vh 0 #a06353 , 77vw 5vh 0 #b48072 , 34vw 83vh 0 #b48072 , 8vw 32vh 0 #b48072 , 46vw 72vh 0 #b48072 , 86vw 9vh 0 #b48072 , 92vw 33vh 0 #b48072 , 55vw 28vh 0 #b48072 , 26vw 74vh 0 #b48072 , 39vw 48vh 0 #b48072 , 75vw 43vh 0 #a06353 , 56vw 57vh 0 #a06353 , 54vw 16vh 0 #b48072 , 27vw 10vh 0 #a06353 , 71vw 52vh 0 #b48072 , 39vw 26vh 0 #b48072 , 95vw 90vh 0 #a06353 , 97vw 17vh 0 #a06353 , 76vw 69vh 0 #b48072 , 4vw 80vh 0 #a06353 , 20vw 37vh 0 #b48072 , 14vw 4vh 0 #a06353 , 87vw 89vh 0 #b48072 , 35vw 4vh 0 #a06353 , 57vw 39vh 0 #b48072 , 78vw 79vh 0 #a06353 , 17vw 58vh 0 #b48072 , 87vw 90vh 0 #b48072 , 6vw 43vh 0 #b48072 , 52vw 99vh 0 #a06353 , 96vw 94vh 0 #b48072 , 25vw 51vh 0 #b48072 , 80vw 65vh 0 #b48072 , 43vw 75vh 0 #a06353 , 60vw 75vh 0 #b48072 , 82vw 36vh 0 #b48072 , 41vw 74vh 0 #b48072 , 75vw 51vh 0 #a06353 , 21vw 68vh 0 #b48072 , 77vw 33vh 0 #a06353 , 94vw 39vh 0 #a06353 , 64vw 23vh 0 #b48072 , 18vw 71vh 0 #b48072 , 12vw 37vh 0 #a06353 , 65vw 33vh 0 #a06353 , 23vw 11vh 0 #a06353 , 43vw 77vh 0 #a06353 , 52vw 78vh 0 #b48072 , 94vw 88vh 0 #a06353 , 100vw 15vh 0 #b48072 , 97vw 89vh 0 #b48072 , 33vw 5vh 0 #a06353 , 13vw 81vh 0 #a06353 , 56vw 46vh 0 #a06353 , 65vw 72vh 0 #b48072 , 19vw 47vh 0 #b48072 , 24vw 43vh 0 #a06353 , 86vw 25vh 0 #b48072 , 71vw 95vh 0 #b48072 , 8vw 10vh 0 #b48072 , 25vw 45vh 0 #b48072 , 52vw 51vh 0 #b48072 , 35vw 94vh 0 #a06353 , 67vw 43vh 0 #b48072 , 37vw 25vh 0 #b48072 , 50vw 13vh 0 #b48072 , 4vw 88vh 0 #a06353 , 46vw 4vh 0 #a06353 , 55vw 46vh 0 #b48072 , 9vw 44vh 0 #b48072 , 65vw 9vh 0 #a06353 , 33vw 32vh 0 #a06353 , 7vw 3vh 0 #a06353 , 45vw 99vh 0 #a06353 , 32vw 12vh 0 #a06353 , 5vw 41vh 0 #b48072 , 56vw 86vh 0 #b48072 , 65vw 11vh 0 #a06353 , 94vw 17vh 0 #b48072 , 67vw 25vh 0 #b48072 , 91vw 11vh 0 #a06353 , 64vw 68vh 0 #a06353 , 76vw 18vh 0 #a06353 , 36vw 95vh 0 #a06353 , 29vw 25vh 0 #a06353 , 17vw 87vh 0 #a06353 , 25vw 50vh 0 #a06353 , 1vw 67vh 0 #a06353 , 39vw 17vh 0 #b48072 , 100vw 61vh 0 #a06353 , 88vw 16vh 0 #b48072 , 41vw 55vh 0 #b48072 , 8vw 11vh 0 #a06353 , 46vw 10vh 0 #a06353 , 78vw 9vh 0 #a06353 , 52vw 76vh 0 #b48072 , 10vw 16vh 0 #a06353 , 51vw 51vh 0 #a06353 , 67vw 9vh 0 #b48072 , 92vw 89vh 0 #a06353 , 52vw 80vh 0 #a06353 , 30vw 83vh 0 #b48072 , 85vw 82vh 0 #a06353 , 25vw 74vh 0 #b48072 , 66vw 70vh 0 #b48072 , 52vw 42vh 0 #a06353 , 100vw 57vh 0 #b48072 , 25vw 27vh 0 #a06353 , 32vw 19vh 0 #a06353 , 89vw 50vh 0 #b48072 , 61vw 95vh 0 #a06353 , 40vw 97vh 0 #b48072 , 18vw 58vh 0 #b48072 , 87vw 10vh 0 #a06353 , 66vw 49vh 0 #b48072 , 11vw 12vh 0 #b48072 , 14vw 14vh 0 #b48072 , 83vw 40vh 0 #a06353 , 10vw 75vh 0 #a06353 , 86vw 22vh 0 #a06353 , 49vw 2vh 0 #b48072 , 4vw 46vh 0 #b48072 , 37vw 76vh 0 #a06353 , 18vw 59vh 0 #a06353 , 23vw 56vh 0 #a06353 , 51vw 84vh 0 #b48072 , 52vw 80vh 0 #a06353 , 89vw 95vh 0 #b48072 , 4vw 61vh 0 #a06353 , 77vw 51vh 0 #b48072 , 48vw 27vh 0 #b48072 , 61vw 12vh 0 #a06353 , 43vw 38vh 0 #a06353 , 48vw 69vh 0 #a06353 , 27vw 75vh 0 #a06353 , 26vw 90vh 0 #a06353 , 44vw 17vh 0 #a06353 , 39vw 7vh 0 #a06353 , 14vw 7vh 0 #a06353 , 98vw 57vh 0 #b48072 , 97vw 52vh 0 #a06353 , 95vw 35vh 0 #b48072 , 13vw 26vh 0 #b48072 , 42vw 60vh 0 #a06353 , 36vw 49vh 0 #b48072 , 6vw 13vh 0 #b48072 , 56vw 97vh 0 #b48072 , 95vw 10vh 0 #a06353 , 28vw 36vh 0 #b48072 , 14vw 43vh 0 #b48072 , 24vw 70vh 0 #b48072 , 9vw 9vh 0 #a06353 , 31vw 4vh 0 #b48072 , 48vw 49vh 0 #a06353 , 94vw 28vh 0 #a06353 , 54vw 72vh 0 #a06353 , 76vw 78vh 0 #a06353 , 71vw 21vh 0 #b48072 , 51vw 22vh 0 #a06353 , 91vw 91vh 0 #b48072 , 43vw 69vh 0 #b48072 , 73vw 65vh 0 #b48072 , 90vw 24vh 0 #a06353 , 75vw 23vh 0 #a06353 , 58vw 42vh 0 #a06353 , 65vw 78vh 0 #a06353 , 72vw 6vh 0 #a06353 , 63vw 58vh 0 #a06353 , 75vw 38vh 0 #b48072 , 22vw 64vh 0 #b48072 , 81vw 25vh 0 #b48072 , 79vw 68vh 0 #a06353 , 8vw 40vh 0 #b48072 , 75vw 52vh 0 #a06353 , 99vw 67vh 0 #b48072 , 63vw 77vh 0 #b48072 , 26vw 65vh 0 #b48072 , 39vw 49vh 0 #b48072 , 97vw 4vh 0 #b48072 , 29vw 82vh 0 #a06353 , 14vw 12vh 0 #a06353 , 14vw 5vh 0 #b48072 , 11vw 41vh 0 #b48072 , 33vw 49vh 0 #b48072 , 65vw 92vh 0 #b48072 , 80vw 39vh 0 #a06353 , 60vw 78vh 0 #a06353 , 46vw 28vh 0 #b48072 , 2vw 77vh 0 #b48072 , 32vw 89vh 0 #b48072 , 61vw 96vh 0 #b48072 , 68vw 25vh 0 #b48072 , 32vw 45vh 0 #b48072 , 25vw 33vh 0 #b48072 , 85vw 17vh 0 #a06353 , 50vw 55vh 0 #a06353 , 24vw 12vh 0 #b48072 , 38vw 3vh 0 #b48072 , 83vw 34vh 0 #b48072 , 77vw 61vh 0 #a06353 , 53vw 86vh 0 #b48072 , 30vw 86vh 0 #a06353 , 4vw 47vh 0 #a06353 , 36vw 72vh 0 #b48072 , 42vw 3vh 0 #b48072 , 90vw 52vh 0 #b48072 , 77vw 20vh 0 #a06353 , 17vw 72vh 0 #b48072 , 69vw 46vh 0 #a06353 , 41vw 86vh 0 #a06353 , 12vw 11vh 0 #a06353 , 33vw 15vh 0 #b48072 , 42vw 12vh 0 #a06353 , 100vw 25vh 0 #a06353 , 71vw 79vh 0 #a06353 , 18vw 94vh 0 #b48072 , 59vw 76vh 0 #a06353 , 35vw 38vh 0 #b48072 , 21vw 81vh 0 #a06353 , 26vw 94vh 0 #a06353 , 93vw 3vh 0 #b48072 , 55vw 68vh 0 #b48072 , 97vw 77vh 0 #b48072 , 82vw 35vh 0 #a06353 , 94vw 29vh 0 #a06353 , 16vw 33vh 0 #b48072 , 57vw 69vh 0 #b48072 , 82vw 62vh 0 #a06353 , 7vw 22vh 0 #b48072 , 84vw 95vh 0 #b48072 , 62vw 22vh 0 #b48072 , 54vw 47vh 0 #a06353 , 5vw 9vh 0 #a06353 , 83vw 33vh 0 #b48072 , 97vw 7vh 0 #b48072 , 45vw 62vh 0 #b48072 , 36vw 86vh 0 #b48072 , 30vw 64vh 0 #a06353 , 100vw 38vh 0 #a06353 , 77vw 57vh 0 #a06353 , 40vw 39vh 0 #a06353 , 28vw 37vh 0 #b48072 , 81vw 69vh 0 #b48072 , 32vw 27vh 0 #a06353 , 67vw 96vh 0 #a06353 , 92vw 11vh 0 #a06353 , 74vw 80vh 0 #b48072 , 92vw 88vh 0 #a06353 , 57vw 4vh 0 #a06353 , 38vw 18vh 0 #b48072 , 59vw 52vh 0 #a06353 , 40vw 20vh 0 #a06353 , 19vw 80vh 0 #a06353 , 80vw 94vh 0 #b48072 , 34vw 91vh 0 #a06353 , 68vw 82vh 0 #a06353 , 49vw 38vh 0 #a06353 , 49vw 99vh 0 #b48072 , 15vw 28vh 0 #b48072 , 98vw 96vh 0 #a06353 , 6vw 85vh 0 #a06353 , 30vw 3vh 0 #a06353 , 16vw 68vh 0 #a06353 , 49vw 19vh 0 #b48072 , 72vw 80vh 0 #b48072 , 40vw 95vh 0 #a06353 , 24vw 43vh 0 #b48072 , 26vw 62vh 0 #a06353 , 83vw 63vh 0 #a06353 , 59vw 98vh 0 #b48072 , 48vw 98vh 0 #a06353 , 97vw 81vh 0 #b48072 , 59vw 20vh 0 #a06353 , 85vw 72vh 0 #a06353 , 30vw 99vh 0 #a06353 , 23vw 76vh 0 #b48072 , 77vw 43vh 0 #a06353 , 78vw 70vh 0 #b48072 , 8vw 3vh 0 #b48072 , 34vw 32vh 0 #b48072 , 25vw 17vh 0 #b48072 , 69vw 20vh 0 #b48072 , 2vw 24vh 0 #b48072 , 63vw 31vh 0 #a06353 , 63vw 94vh 0 #a06353 , 33vw 99vh 0 #a06353 , 56vw 85vh 0 #a06353 , 47vw 5vh 0 #a06353 , 54vw 49vh 0 #a06353 , 90vw 1vh 0 #b48072 , 2vw 5vh 0 #a06353 , 43vw 85vh 0 #b48072 , 41vw 12vh 0 #b48072 , 13vw 47vh 0 #a06353 , 71vw 97vh 0 #a06353 , 38vw 80vh 0 #b48072 , 96vw 60vh 0 #b48072 , 36vw 51vh 0 #a06353 , 77vw 50vh 0 #a06353 , 51vw 60vh 0 #b48072 , 51vw 35vh 0 #b48072 , 100vw 79vh 0 #b48072 , 92vw 97vh 0 #b48072 , 45vw 3vh 0 #a06353 , 96vw 56vh 0 #b48072 , 58vw 48vh 0 #a06353 , 86vw 17vh 0 #a06353 , 70vw 6vh 0 #b48072 , 23vw 59vh 0 #a06353 , 68vw 31vh 0 #b48072 , 59vw 7vh 0 #b48072 , 71vw 97vh 0 #b48072 , 26vw 43vh 0 #b48072 , 94vw 81vh 0 #b48072 , 97vw 82vh 0 #a06353 , 26vw 59vh 0 #a06353 , 90vw 79vh 0 #b48072 , 68vw 60vh 0 #b48072 , 32vw 3vh 0 #a06353 , 8vw 46vh 0 #a06353 , 43vw 92vh 0 #a06353 , 84vw 35vh 0 #a06353 , 38vw 23vh 0 #a06353 , 2vw 60vh 0 #b48072 , 48vw 90vh 0 #b48072 , 36vw 9vh 0 #a06353 , 89vw 5vh 0 #b48072 , 31vw 86vh 0 #a06353 , 28vw 34vh 0 #b48072 , 11vw 95vh 0 #b48072 , 32vw 57vh 0 #a06353 , 25vw 23vh 0 #a06353 , 89vw 61vh 0 #a06353 , 76vw 65vh 0 #b48072 , 84vw 74vh 0 #b48072 , 99vw 75vh 0 #b48072 , 79vw 59vh 0 #a06353 , 10vw 42vh 0 #b48072 , 19vw 68vh 0 #b48072 , 13vw 86vh 0 #a06353 , 2vw 58vh 0 #a06353 , 27vw 45vh 0 #a06353 , 95vw 59vh 0 #b48072 , 11vw 42vh 0 #a06353 , 49vw 100vh 0 #a06353 , 19vw 5vh 0 #a06353 , 43vw 30vh 0 #a06353 , 87vw 62vh 0 #a06353 , 37vw 4vh 0 #b48072 , 52vw 97vh 0 #a06353 , 3vw 41vh 0 #a06353 , 50vw 34vh 0 #a06353 , 63vw 6vh 0 #a06353 , 35vw 28vh 0 #b48072 , 50vw 76vh 0 #a06353 , 99vw 83vh 0 #a06353 , 10vw 97vh 0 #b48072 , 89vw 70vh 0 #a06353 , 41vw 61vh 0 #b48072 , 8vw 77vh 0 #a06353 , 47vw 23vh 0 #a06353 , 6vw 40vh 0 #a06353 , 49vw 4vh 0 #b48072 , 72vw 88vh 0 #b48072 , 43vw 89vh 0 #a06353 , 36vw 85vh 0 #b48072 , 12vw 72vh 0 #a06353 , 8vw 34vh 0 #a06353 , 83vw 90vh 0 #b48072 , 68vw 4vh 0 #b48072 , 5vw 18vh 0 #b48072 , 10vw 18vh 0 #b48072 , 28vw 65vh 0 #a06353 , 11vw 27vh 0 #b48072 , 72vw 76vh 0 #a06353 , 67vw 32vh 0 #a06353 , 48vw 91vh 0 #a06353 , 2vw 75vh 0 #b48072 , 47vw 46vh 0 #b48072 , 97vw 68vh 0 #a06353 , 6vw 62vh 0 #a06353 , 21vw 80vh 0 #a06353 , 25vw 83vh 0 #b48072 , 96vw 16vh 0 #b48072 , 73vw 60vh 0 #a06353 , 81vw 77vh 0 #b48072 , 39vw 81vh 0 #b48072 , 29vw 60vh 0 #b48072 , 99vw 19vh 0 #b48072 , 97vw 87vh 0 #a06353 , 84vw 67vh 0 #a06353 , 73vw 10vh 0 #b48072 , 24vw 97vh 0 #a06353 , 8vw 60vh 0 #b48072 , 20vw 52vh 0 #b48072 , 20vw 74vh 0 #a06353 , 48vw 89vh 0 #b48072 , 7vw 23vh 0 #b48072 , 95vw 53vh 0 #b48072 , 49vw 99vh 0 #a06353 , 6vw 48vh 0 #b48072 , 66vw 88vh 0 #b48072 , 71vw 72vh 0 #b48072 , 40vw 79vh 0 #b48072 , 67vw 38vh 0 #b48072 , 52vw 60vh 0 #a06353 , 86vw 65vh 0 #a06353 , 74vw 10vh 0 #a06353 , 14vw 54vh 0 #a06353 , 50vw 59vh 0 #a06353 , 95vw 78vh 0 #a06353 , 25vw 91vh 0 #a06353 , 29vw 31vh 0 #a06353 , 91vw 45vh 0 #b48072 , 98vw 7vh 0 #b48072 , 62vw 24vh 0 #a06353 , 75vw 26vh 0 #a06353 , 9vw 30vh 0 #a06353 , 72vw 47vh 0 #b48072 , 50vw 48vh 0 #a06353 , 61vw 18vh 0 #b48072 , 99vw 13vh 0 #a06353 , 18vw 15vh 0 #a06353 , 53vw 8vh 0 #b48072 , 2vw 53vh 0 #a06353 , 68vw 38vh 0 #b48072 , 62vw 82vh 0 #a06353 , 52vw 20vh 0 #b48072 , 77vw 86vh 0 #a06353 , 56vw 69vh 0 #b48072 , 71vw 54vh 0 #b48072 , 93vw 96vh 0 #a06353 , 44vw 7vh 0 #a06353 , 74vw 54vh 0 #b48072 , 15vw 53vh 0 #a06353 , 32vw 86vh 0 #b48072 , 12vw 71vh 0 #a06353 , 79vw 88vh 0 #b48072 , 96vw 47vh 0 #b48072 , 99vw 2vh 0 #b48072;
          opacity: 0.05;
        }
        
        text {
          transform: translate3d(24rem, 85rem, 0);
          display: flex !important;
          flex-wrap: wrap;
        }
        text div:nth-of-type(1) {
          width: 60rem;
          height: 10rem;
        }
        text div:nth-of-type(1) i:nth-of-type(1) {
          width: 0.7rem;
          height: 0.8rem;
          background: #000;
          border-radius: 50%;
          box-shadow: 0.25rem -0.2rem 0 #000, 0.5rem -0.4rem 0 #000, 0.7rem -0.7rem 0 0.05rem #000, 0.7rem -1rem 0 #000, 0.7rem -1.2rem 0 -0.05rem #000, 0.6rem -1.4rem 0 -0.075rem #000, 0.5rem -1.6rem 0 -0.075rem #000, 0.35rem -1.8rem 0 -0.075rem #000, 0.1rem -2rem 0 -0.075rem #000, -0.1rem -2.1rem 0 -0.075rem #000, -0.3rem -2.05rem 0 -0.075rem #000;
        }
        text div:nth-of-type(1) i:nth-of-type(1):before {
          width: 6rem;
          height: 8.5rem;
          transform: translate3d(-3rem, -2.5rem, 0) rotate(26deg) skewX(-4deg);
          border-radius: 50%;
          border: 0.7rem solid #000;
          border-right-color: rgba(255, 255, 255, 0);
          border-top-color: rgba(255, 255, 255, 0);
        }
        text div:nth-of-type(1) i:nth-of-type(1):after {
          width: 0.6rem;
          height: 0.6rem;
          transform: translate3d(-5.1rem, 4.3rem, 0) rotate(38deg);
          border-radius: 50%;
          background: #000;
          box-shadow: 0.1rem -0.3rem 0 #000, 0.2rem -0.7rem 0 0.05rem #000, 0.2rem -1.2rem 0 0.05rem #000, 0.21rem -1.6rem 0 0.05rem #000, 0.22rem -2.1rem 0 0.075rem #000;
        }
        text div:nth-of-type(1) i:nth-of-type(2) {
          width: 0.6rem;
          height: 0.6rem;
          transform: translate3d(4rem, 2.5rem, 0);
          background: #000;
          border-radius: 50%;
          box-shadow: 0.25rem -0.3rem 0 #000, 0.4rem -0.6rem 0 #000, 0.5rem -0.9rem 0 #000, 0.55rem -1.3rem 0 -0.05rem #000, 0.3rem -1.6rem 0 #000, 0rem -1.6rem 0 0.05rem #000, -0.3rem -1.5rem 0 #000, -0.6rem -1.4rem 0 #000, -0.9rem -1.3rem 0 #000;
        }
        text div:nth-of-type(1) i:nth-of-type(2):before {
          width: 5.5rem;
          height: 0.63rem;
          transform: translate3d(-4.9rem, 1.3rem, 0) rotate(-28deg);
          background: #000;
          border-radius: 0.3rem;
        }
        text div:nth-of-type(1) i:nth-of-type(2):after {
          width: 5rem;
          height: 4rem;
          border: 0.7rem solid #000;
          border-top-color: rgba(255, 255, 255, 0);
          border-left-color: rgba(255, 255, 255, 0);
          border-radius: 50%;
          transform: translate3d(-2.7rem, -1.3rem, 0) rotate(93deg) skewY(20deg);
        }
        text div:nth-of-type(1) i:nth-of-type(3) {
          width: 0.6rem;
          height: 0.6rem;
          transform: translate3d(8.2rem, 1.8rem, 0);
          background: #000;
          border-radius: 50%;
          box-shadow: 0.25rem -0.3rem 0 #000, 0.25rem -0.6rem 0 0.05rem #000, 0.1rem -0.8rem 0 0.05rem #000, -0.2rem -1.1rem 0 0.05rem #000, -0.5rem -1.1rem 0 0.02rem #000, -0.8rem -1rem 0 0.02rem #000, -1.1rem -0.8rem 0 0.02rem #000;
        }
        text div:nth-of-type(1) i:nth-of-type(3):before {
          width: 3rem;
          height: 0.62rem;
          transform: translate3d(-4.8rem, 2.3rem, 0) rotate(-35deg);
          background: #000;
          border-radius: 0.3rem;
        }
        text div:nth-of-type(1) i:nth-of-type(3):after {
          border: 0.7rem solid #000;
          border-top-color: rgba(255, 255, 255, 0);
          border-left-color: rgba(255, 255, 255, 0);
          width: 5rem;
          height: 4.5rem;
          border-radius: 50%;
          transform: translate3d(-2.7rem, -1rem, 0) rotate(93deg) skewY(20deg);
        }
        text div:nth-of-type(1) i:nth-of-type(4) {
          width: 0.6rem;
          height: 0.6rem;
          transform: translate3d(12rem, -0.9rem, 0);
          background: #000;
          border-radius: 50%;
          box-shadow: 0.2rem -0.1rem 0 0.02rem #000, -0.8rem 2rem 0 0.02rem #000, -0.85rem 5.8rem 0 #000, -0.6rem 5.7rem 0 -0.02rem #000, -0.4rem 5.6rem 0 -0.05rem #000;
        }
        text div:nth-of-type(1) i:nth-of-type(4):before {
          width: 2.5rem;
          height: 0.62rem;
          transform: translate3d(-3.8rem, 4.7rem, 0) rotate(-35deg);
          background: #000;
          border-radius: 0.3rem;
        }
        text div:nth-of-type(1) i:nth-of-type(4):after {
          border: 0.7rem solid #000;
          border-top-color: rgba(255, 255, 255, 0);
          border-right-color: rgba(255, 255, 255, 0);
          width: 2.5rem;
          height: 4.8rem;
          border-radius: 1rem 0 2.5rem 2.5rem;
          transform: translate3d(-1.7rem, 1.9rem, 0) rotate(26.5deg) skewY(-13deg);
        }
        text div:nth-of-type(1) i:nth-of-type(5) {
          width: 0.5rem;
          height: 0.6rem;
          transform: translate3d(22.5rem, 4.6rem, 0);
          background: #000;
          border-radius: 50%;
          box-shadow: 0.2rem -0.1rem 0 -0.02rem #000, 0.4rem -0.2rem 0 -0.05rem #000, 0.6rem -0.3rem 0 -0.08rem #000, -0.2rem 0.1rem 0 0.02rem #000, -0.6rem 0.1rem 0 0.05rem #000, -0.8rem -0.3rem 0 #000, -1.8rem -3.57rem 0 #000, -1.6rem -3.7rem 0 #000, -1.3rem -3.85rem 0 0.05rem #000, -3.9rem -3.4rem 0 -0.05rem #000, -4.1rem -3.3rem 0 -0.05rem #000, -4.4rem -3.1rem 0 -0.075rem #000, -4.6rem -3rem 0 -0.1rem #000;
        }
        text div:nth-of-type(1) i:nth-of-type(5):before {
          border: 0.7rem solid #000;
          border-bottom-color: rgba(255, 255, 255, 0);
          border-left-color: rgba(255, 255, 255, 0);
          width: 2.5rem;
          height: 5.5rem;
          border-radius: 2.5rem 2.5rem 1rem 0;
          transform: translate3d(-4.9rem, -4.1rem, 0) rotate(24deg) skewY(-35deg);
        }
        text div:nth-of-type(1) i:nth-of-type(5):after {
          border: 0.7rem solid #000;
          border-bottom-color: rgba(255, 255, 255, 0);
          border-left-color: rgba(255, 255, 255, 0);
          width: 2.5rem;
          height: 4.5rem;
          border-radius: 2.5rem 2.5rem 1rem 0;
          transform: translate3d(-2.2rem, -4.1rem, 0) rotate(21deg) skewY(-2deg);
        }
        text div:nth-of-type(1) i:nth-of-type(6) {
          width: 0.6rem;
          height: 0.6rem;
          transform: translate3d(29.2rem, 2rem, 0);
          background: #000;
          border-radius: 50%;
          box-shadow: 0.25rem -0.3rem 0 #000, 0.4rem -0.6rem 0 #000, 0.5rem -0.9rem 0 #000, 0.55rem -1.3rem 0 -0.05rem #000, 0.3rem -1.6rem 0 #000, 0rem -1.7rem 0 #000, -0.4rem -1.6rem 0 #000, -0.7rem -1.45rem 0 #000, -1.1rem -1.3rem 0 #000;
        }
        text div:nth-of-type(1) i:nth-of-type(6):before {
          width: 3.3rem;
          height: 0.63rem;
          transform: translate3d(-2.9rem, 0.7rem, 0) rotate(-23deg);
          background: #000;
          border-radius: 0.3rem;
        }
        text div:nth-of-type(1) i:nth-of-type(6):after {
          width: 5.5rem;
          height: 4.5rem;
          border: 0.7rem solid #000;
          border-top-color: rgba(255, 255, 255, 0);
          border-left-color: rgba(255, 255, 255, 0);
          border-radius: 50%;
          transform: translate3d(-2.7rem, -1.5rem, 0) rotate(87deg) skewY(16deg);
        }
        text div:nth-of-type(1) i:nth-of-type(7) {
          width: 0.7rem;
          height: 0.7rem;
          transform: translate3d(32rem, 3.75rem, 0);
          background: #000;
          border-radius: 50%;
          box-shadow: -0.35rem 0.15rem 0 -0.05rem #000, -0.5rem 0.4rem 0 -0.15rem #000;
        }
        text div:nth-of-type(1) i:nth-of-type(7):before {
          width: 5.5rem;
          height: 0.8rem;
          transform: translate3d(-3.1rem, -1.4rem, 0) rotate(-51deg) skewX(-20deg);
          background: #000;
          border-radius: 0.1rem 0.2rem 50% 50%/0.1rem 0.2rem 0.6rem 0.4rem;
        }
        text div:nth-of-type(1) i:nth-of-type(7):after {
          width: 2.75rem;
          height: 4.3rem;
          border: 0.7rem solid #000;
          border-top: 0.2rem solid rgba(255, 255, 255, 0);
          border-left: 0.2rem solid rgba(255, 255, 255, 0);
          border-radius: 50%;
          transform: translate3d(-0.7rem, -2.6rem, 0) rotate(-5deg) skewY(-13deg) skewX(5deg);
        }
        text div:nth-of-type(1) i:nth-of-type(8) {
          width: 0.6rem;
          height: 0.6rem;
          transform: translate3d(37rem, -1rem, 0);
          background: #000;
          border-radius: 50%;
        }
        text div:nth-of-type(1) i:nth-of-type(8):before {
          width: 2.5rem;
          height: 0.62rem;
          transform: translate3d(-1rem, 1.5rem, 0) rotate(9deg) skewY(-29deg);
          background: #000;
          border-radius: 0.3rem;
        }
        text div:nth-of-type(1) i:nth-of-type(8):after {
          border: 0.5rem solid #000;
          border-top-color: rgba(255, 255, 255, 0);
          border-right: none;
          border-bottom: 0.7rem solid #000;
          border-radius: 0 0 0.5rem 1.5rem/0 0 1.5rem 2.5rem;
          width: 2rem;
          height: 7rem;
          transform: translate3d(-1rem, -0.3rem, 0) rotate(20deg) skewY(-34deg);
        }
        text div:nth-of-type(1) i:nth-of-type(9) {
          width: 0.6rem;
          height: 0.6rem;
          transform: translate3d(25.9rem, 0.8rem, 0);
          background: #000;
          border-radius: 50%;
          box-shadow: -0.1rem 0.3rem 0 -0.1rem #000, -0.2rem 0.5rem 0 -0.15rem #000, -0.35rem 0.65rem 0 -0.2rem #000, -0.4rem 0.75rem 0 -0.2rem #000, -0.5rem 0.85rem 0 -0.2rem #000, -0.6rem 0.95rem 0 -0.25rem #000, -0.7rem 1rem 0 -0.25rem #000;
        }
        text div:nth-of-type(1) i:nth-of-type(9):before {
          width: 5.5rem;
          height: 0.5rem;
          transform: translate3d(6rem, 2rem, 0) rotate(-47deg) skewY(0);
          background: #000;
          border-radius: 0.3rem;
        }
        text div:nth-of-type(1) i:nth-of-type(10) {
          width: 0.6rem;
          height: 0.6rem;
          transform: translate3d(42.6rem, 0.2rem, 0);
          background: #000;
          border-radius: 50%;
          box-shadow: -0.2rem 0.15rem 0 #000, -0.5rem 0.2rem 0 -0.1rem #000, -0.7rem 0.35rem 0 -0.1rem #000, -0.9rem 0.5rem 0 -0.1rem #000, -1.1rem 0.6rem 0 -0.15rem #000, -1.3rem 0.7rem 0 -0.2rem #000, 0.2rem -0.1rem 0 #000, -0.4rem 0.7rem 0 #000, -0.5rem 1rem 0 #000;
        }
        text div:nth-of-type(1) i:nth-of-type(10):before {
          border: 0.6rem solid #000;
          border-top-color: rgba(255, 255, 255, 0);
          border-right: 0.6rem solid rgba(255, 255, 255, 0);
          border-bottom: 0.6rem solid #000;
          border-radius: 0 0 1.5rem 1.5rem/0 0 1.5rem 1.5rem;
          width: 2.7rem;
          height: 5.1rem;
          transform: translate3d(1.4rem, -0.2rem, 0) rotate(25deg) skewY(-31deg);
        }
        text div:nth-of-type(1) i:nth-of-type(10):after {
          border: 0.6rem solid #000;
          border-top-color: rgba(255, 255, 255, 0);
          border-right: 0.6rem solid rgba(255, 255, 255, 0);
          border-bottom: none;
          border-top: 0.6rem solid #000;
          border-radius: 1.5rem 1.5rem 0 0/1.5rem 4.5rem 0 0;
          width: 3rem;
          height: 6.9rem;
          transform: translate3d(-1.1rem, -0.3rem, 0) rotate(22.2deg) skewY(-31deg);
        }
        text div:nth-of-type(1) i:nth-of-type(11) {
          width: 3.8rem;
          height: 4.7rem;
          transform: translate3d(46.1rem, 0.2rem, 0) rotate(7deg) skewY(-21deg);
          border-radius: 50%;
          border: 0.6rem solid #000;
          border-right-width: 0.5rem;
        }
        text div:nth-of-type(1) i:nth-of-type(11):before {
          border: 0.7rem solid #000;
          border-top-color: rgba(255, 255, 255, 0);
          border-right-color: rgba(255, 255, 255, 0);
          border-left: 0.6rem solid #000;
          border-bottom: 0.6rem solid #000;
          border-radius: 0 0 1.5rem 1.5rem/0 0 1.5rem 1.5rem;
          width: 2.7rem;
          height: 4.5rem;
          transform: translate3d(2.8rem, 0.5rem, 0) rotate(18deg) skewY(4deg);
        }
        text div:nth-of-type(1) i:nth-of-type(11):after {
          width: 0.5rem;
          height: 1.5rem;
          transform: translate3d(-0.9rem, 1.6rem, 0) rotate(35deg);
          background: #000;
        }
        text div:nth-of-type(1) i:nth-of-type(12) {
          width: 0.5rem;
          height: 0.7rem;
          transform: translate3d(53.1rem, 3.5rem, 0);
          background: #000;
          border-radius: 50%;
          box-shadow: -0.1rem 0.15rem 0 -0.05rem #000, -2.1rem 0.4rem 0 #000, -2.5rem 0.6rem 0 #000, -2.7rem -3.2rem 0 #000;
        }
        text div:nth-of-type(1) i:nth-of-type(12):before {
          width: 5.5rem;
          height: 0.8rem;
          transform: translate3d(-2.8rem, -1.8rem, 0) rotate(-55deg) skewX(-20deg);
          background: #000;
          border-radius: 0.1rem 0.2rem 50% 50%/0.1rem 0.2rem 0.6rem 0.4rem;
        }
        text div:nth-of-type(1) i:nth-of-type(12):after {
          width: 2.5rem;
          height: 4.2rem;
          border: 0.7rem solid #000;
          border-top: 0.2rem solid rgba(255, 255, 255, 0);
          border-left: 0.2rem solid rgba(255, 255, 255, 0);
          border-radius: 50%;
          transform: translate3d(-0.5rem, -2.9rem, 0) rotate(-5deg) skewY(-31deg) skewX(9deg);
        }
        text div:nth-of-type(2) {
          transform: translate3d(0, -1.1rem, 0);
          width: 60rem;
          height: 10rem;
        }
        text div:nth-of-type(2) i:nth-of-type(1) {
          transform: rotate(21deg) skewY(-43deg);
          border: 0.6rem solid #000;
          border-top-color: rgba(255, 255, 255, 0);
          border-right: 0.1rem solid rgba(255, 255, 255, 0);
          border-bottom: 0.6rem solid #000;
          border-radius: 0 0 1.5rem 1.5rem/0 0 1.5rem 3.3rem;
          width: 2.7rem;
          height: 6.1rem;
        }
        text div:nth-of-type(2) i:nth-of-type(1):before {
          transform: translate3d(1.9rem, 0.8rem, 0) rotate(0deg) skewY(0deg);
          border: 0.6rem solid #000;
          border-top-color: rgba(255, 255, 255, 0);
          border-right: 0.6rem solid rgba(255, 255, 255, 0);
          border-bottom: 0.6rem solid #000;
          border-radius: 0 0 1.5rem 1.5rem/0 0 1.5rem 3.3rem;
          width: 2.5rem;
          height: 6.1rem;
        }
        text div:nth-of-type(2) i:nth-of-type(1):after {
          width: 1.5rem;
          height: 1.5rem;
          border-right: 0.5rem solid #000;
          transform: translate3d(-1.8rem, 0rem, 0) rotate(31deg) skewY(0deg);
          border-radius: 50%;
        }
        text div:nth-of-type(2) i:nth-of-type(2) {
          transform: translate3d(5rem, 5.2rem, 0);
          width: 0.6rem;
          height: 0.7rem;
          background: #000;
          border-radius: 50%;
          box-shadow: 0.1rem -0.3rem 0 0.01rem #000, 1.2rem -4.2rem 0 0.05rem #000, 1.15rem -3.8rem 0 0.05rem #000, 1.1rem -3.4rem 0 0.05rem #000;
        }
        text div:nth-of-type(2) i:nth-of-type(2):before {
          transform: translate3d(0.9rem, -4.5rem, 0) rotate(20deg) skewY(-21deg);
          width: 2.8rem;
          height: 5rem;
          border-radius: 1.4rem 1.4rem 0 1rem/2rem 1.4rem 0 0.5rem;
          border: 0.7rem solid #000;
          border-bottom-color: rgba(255, 255, 255, 0);
          border-top-width: 0.4rem;
        }
        text div:nth-of-type(2) i:nth-of-type(2):after {
          transform: translate3d(-2.4rem, -5.5rem, 0) rotate(29deg);
          width: 2.9rem;
          height: 6rem;
          border-radius: 0 0.5rem 0.8rem 0/0 0.5rem 5rem 0;
          border: 0.5rem solid rgba(255, 255, 255, 0);
          border-right-color: #000;
        }
        text div:nth-of-type(2) i:nth-of-type(3) {
          width: 0.6rem;
          height: 0.6rem;
          transform: translate3d(13.1rem, 2.6rem, 0) rotate(-4deg);
          background: #000;
          border-radius: 50%;
          box-shadow: 0.25rem -0.3rem 0 #000, 0.4rem -0.6rem 0 #000, 0.5rem -0.9rem 0 #000, 0.55rem -1.3rem 0 0.05rem #000, 0.3rem -1.7rem 0 0.05rem #000, 0rem -1.8rem 0 0.05rem #000, -0.3rem -1.8rem 0 #000, -0.6rem -1.7rem 0 #000, -0.9rem -1.6rem 0 #000, 0.4rem 1.65rem 0 -0.1rem #000, -5.6rem 1.7rem 0 0.1rem #000, -5.4rem 2.2rem 0 0.05rem #000, -5.2rem 2.4rem 0 #000, -5rem 2.5rem 0 -0.05rem #000;
        }
        text div:nth-of-type(2) i:nth-of-type(3):before {
          transform: translate3d(-4.2rem, -2.6rem, 0) rotate(61deg);
          width: 2.9rem;
          height: 6.8rem;
          border-radius: 0 0.6rem 1.2rem 0/0 3rem 5rem 0;
          border: 0.6rem solid rgba(255, 255, 255, 0);
          border-right-color: #000;
        }
        text div:nth-of-type(2) i:nth-of-type(3):after {
          width: 5.5rem;
          height: 4rem;
          border: 0.7rem solid #000;
          border-left-color: rgba(255, 255, 255, 0);
          border-top: 0.3rem solid rgba(255, 255, 255, 0);
          border-radius: 50%;
          transform: translate3d(-3.1rem, -1.5rem, 0) rotate(93deg) skewY(20deg);
        }
        text div:nth-of-type(2) i:nth-of-type(4) {
          transform: translate3d(18.5rem, -0.2rem, 0) rotate(24deg) skewY(-34deg);
          border: 0.6rem solid #000;
          border-right-color: rgba(255, 255, 255, 0);
          border-bottom: none;
          border-top-width: 0.7rem;
          border-radius: 1.5rem 1.5rem 0 0/1.5rem 3.3rem 0 0;
          width: 3rem;
          height: 7.8rem;
        }
        text div:nth-of-type(2) i:nth-of-type(4):before {
          transform: translate3d(1.5rem, -0.3rem, 0) rotate(0deg) skewY(0deg);
          border-radius: 0 0.9rem 1.5rem 1.2rem/0 0.9rem 1.5rem 3.3rem;
          width: 3.15rem;
          height: 5.5rem;
          border: 0.7rem solid #000;
          border-bottom-width: 0.8rem;
          border-right-width: 0.75rem;
          border-top-color: rgba(255, 255, 255, 0);
        }
        text div:nth-of-type(2) i:nth-of-type(4):after {
          width: 1.8rem;
          height: 1.8rem;
          border-right: 0.7rem solid #000;
          transform: translate3d(-1.8rem, -1.1rem, 0) rotate(28deg);
          border-radius: 50%;
        }
        text div:nth-of-type(2) i:nth-of-type(5) {
          transform: translate3d(27.1rem, -0.6rem, 0) rotate(24deg) skewY(-34deg);
          border: 0.6rem solid #000;
          border-right: 0.2rem solid rgba(255, 255, 255, 0);
          border-bottom: none;
          border-top-width: 1rem;
          border-radius: 2rem 1.5rem 0 0.5rem/3rem 3.3rem 0 0.5rem;
          width: 3.6rem;
          height: 7.8rem;
        }
        text div:nth-of-type(2) i:nth-of-type(5):before {
          transform: translate3d(1.9rem, 0.4rem, 0) rotate(8deg) skewY(-8deg);
          border-radius: 0 0 2.5rem 3rem/0 0 2.5rem 6rem;
          width: 3.5rem;
          height: 5.2rem;
          border: 0.7rem solid #000;
          border-bottom-width: 0.6rem;
          border-right-color: rgba(255, 255, 255, 0);
          border-top-color: rgba(255, 255, 255, 0);
        }
        text div:nth-of-type(2) i:nth-of-type(5):after {
          width: 3rem;
          height: 5.5rem;
          transform: translate3d(-3.4rem, -2rem, 0) rotate(23deg) skewY(25deg);
          border-radius: 0 0.9rem 1.5rem 1.2rem/0 0.9rem 1.5rem 3.3rem;
          border: 0.7rem solid #000;
          border-top: none;
          border-left: none;
        }
        text div:nth-of-type(2) i:nth-of-type(6) {
          width: 0.6rem;
          height: 0.6rem;
          transform: translate3d(35.6rem, 1.8rem, 0) rotate(-4deg);
          background: #000;
          border-radius: 50%;
          box-shadow: 0.25rem -0.3rem 0 #000, 0.4rem -0.6rem 0 #000, 0.5rem -0.9rem 0 #000, 0.55rem -1.3rem 0 0.05rem #000, 0.3rem -1.7rem 0 0.05rem #000, 0rem -1.8rem 0 0.05rem #000, -0.3rem -1.8rem 0 #000, -0.6rem -1.7rem 0 #000, -0.9rem -1.6rem 0 #000, -1.1rem -1.5rem 0 #000, -4.5rem -1.5rem 0 0.1rem #000, -13.5rem -2.3rem 0 0.1rem #000, -9.7rem -4rem 0 0.2rem #000, 3.2rem 2.5rem 0 0.2rem #000;
        }
        text div:nth-of-type(2) i:nth-of-type(6):before {
          transform: translate3d(-4.2rem, -2.7rem, 0) rotate(61deg);
          width: 2.9rem;
          height: 6.8rem;
          border-radius: 0 0.6rem 1.2rem 0/0 3rem 5rem 0;
          border: 0.6rem solid rgba(255, 255, 255, 0);
          border-right-color: #000;
        }
        text div:nth-of-type(2) i:nth-of-type(6):after {
          width: 5.5rem;
          height: 6rem;
          border: 0.7rem solid #000;
          border-left-color: rgba(255, 255, 255, 0);
          border-top: 0.3rem solid rgba(255, 255, 255, 0);
          border-radius: 50%;
          transform: translate3d(-2.6rem, -2.5rem, 0) rotate(93deg) skewY(25deg);
        }
        
        pipe {
          transform-style: preserve-3d;
          width: 121rem;
          height: 56rem;
          position: absolute;
          top: 0;
          left: 0;
          transform: translate3d(12rem, 15rem, 10rem) rotateY(5deg);
        }
        pipe > i:nth-of-type(1) {
          width: 46rem;
          height: 46rem;
          transform: translate3d(71rem, -9rem, 0) rotate(53deg);
          overflow: hidden;
          border-radius: 0 50% 0 0;
        }
        pipe > i:nth-of-type(1) > i:nth-of-type(1) {
          width: 80rem;
          height: 40rem;
          border-radius: 50%;
          transform: translate3d(-7.75rem, 4.75rem, 0) rotate(-58.5deg);
          overflow: hidden;
        }
        pipe > i:nth-of-type(1) > i:nth-of-type(1):before {
          width: 70rem;
          height: 40rem;
          border-radius: 50%;
          transform: translate3d(8rem, 7.5rem, 0) rotate(-14deg);
          box-shadow: 0 -17rem 0 #000;
        }
        pipe > i:nth-of-type(1) > i:nth-of-type(1):after {
          width: 128rem;
          height: 178rem;
          border-top: 6.5rem solid #956a82;
          transform: translate3d(0rem, -7.75rem, 0) rotate(302deg);
          border-radius: 38%;
          filter: blur(0.75rem);
          -webkit-mask-image: linear-gradient(116deg, #fff, #fff, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 0));
          background: rgba(255, 255, 255, 0.01);
        }
        pipe > i:nth-of-type(1) > i:nth-of-type(2) {
          width: 80rem;
          height: 40rem;
          border-radius: 50%;
          transform: translate3d(-7.75rem, 4.75rem, 0) rotate(-58.5deg);
          overflow: hidden;
          -webkit-mask-image: linear-gradient(to right, #fff, #fff, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 0));
        }
        pipe > i:nth-of-typ.........完整代码请登录后点击上方下载按钮下载查看

网友评论0