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 #.........完整代码请登录后点击上方下载按钮下载查看
网友评论0