div+css实现一个三维烟嘴效果代码
代码语言:html
所属分类:三维
代码描述:div+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