纯css打造文字三维城市和飞机绕飞效果
代码语言:html
所属分类:三维
代码描述:纯css打造文字三维城市和飞机绕飞效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; height: 100vh; width: 100vw; -webkit-perspective: 1200px; perspective: 1200px; background: #c4e4e4; flex-wrap: wrap; } body * { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } body *:before, body *:after { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } body .cell { position: absolute; height: 2.5vh; width: 100vw; z-index: 999; cursor: pointer; } body .cell:focus ~ #wrap .plane .body .wrap, body .cell:active ~ #wrap .plane .body .wrap { -webkit-transform: rotateZ(720deg); transform: rotateZ(720deg); } body .cell:nth-of-type(1) { top: 0vh; } body .cell:nth-of-type(1):hover ~ #wrap { -webkit-transform: rotateX(69deg) translateY(245px) scale(0.75); transform: rotateX(69deg) translateY(245px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(2) { top: 2.5vh; } body .cell:nth-of-type(2):hover ~ #wrap { -webkit-transform: rotateX(68deg) translateY(240px) scale(0.75); transform: rotateX(68deg) translateY(240px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(3) { top: 5vh; } body .cell:nth-of-type(3):hover ~ #wrap { -webkit-transform: rotateX(67deg) translateY(235px) scale(0.75); transform: rotateX(67deg) translateY(235px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(4) { top: 7.5vh; } body .cell:nth-of-type(4):hover ~ #wrap { -webkit-transform: rotateX(66deg) translateY(230px) scale(0.75); transform: rotateX(66deg) translateY(230px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(5) { top: 10vh; } body .cell:nth-of-type(5):hover ~ #wrap { -webkit-transform: rotateX(65deg) translateY(225px) scale(0.75); transform: rotateX(65deg) translateY(225px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(6) { top: 12.5vh; } body .cell:nth-of-type(6):hover ~ #wrap { -webkit-transform: rotateX(64deg) translateY(220px) scale(0.75); transform: rotateX(64deg) translateY(220px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(7) { top: 15vh; } body .cell:nth-of-type(7):hover ~ #wrap { -webkit-transform: rotateX(63deg) translateY(215px) scale(0.75); transform: rotateX(63deg) translateY(215px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(8) { top: 17.5vh; } body .cell:nth-of-type(8):hover ~ #wrap { -webkit-transform: rotateX(62deg) translateY(210px) scale(0.75); transform: rotateX(62deg) translateY(210px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(9) { top: 20vh; } body .cell:nth-of-type(9):hover ~ #wrap { -webkit-transform: rotateX(61deg) translateY(205px) scale(0.75); transform: rotateX(61deg) translateY(205px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(10) { top: 22.5vh; } body .cell:nth-of-type(10):hover ~ #wrap { -webkit-transform: rotateX(60deg) translateY(200px) scale(0.75); transform: rotateX(60deg) translateY(200px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(11) { top: 25vh; } body .cell:nth-of-type(11):hover ~ #wrap { -webkit-transform: rotateX(59deg) translateY(195px) scale(0.75); transform: rotateX(59deg) translateY(195px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(12) { top: 27.5vh; } body .cell:nth-of-type(12):hover ~ #wrap { -webkit-transform: rotateX(58deg) translateY(190px) scale(0.75); transform: rotateX(58deg) translateY(190px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(13) { top: 30vh; } body .cell:nth-of-type(13):hover ~ #wrap { -webkit-transform: rotateX(57deg) translateY(185px) scale(0.75); transform: rotateX(57deg) translateY(185px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(14) { top: 32.5vh; } body .cell:nth-of-type(14):hover ~ #wrap { -webkit-transform: rotateX(56deg) translateY(180px) scale(0.75); transform: rotateX(56deg) translateY(180px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(15) { top: 35vh; } body .cell:nth-of-type(15):hover ~ #wrap { -webkit-transform: rotateX(55deg) translateY(175px) scale(0.75); transform: rotateX(55deg) translateY(175px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(16) { top: 37.5vh; } body .cell:nth-of-type(16):hover ~ #wrap { -webkit-transform: rotateX(54deg) translateY(170px) scale(0.75); transform: rotateX(54deg) translateY(170px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(17) { top: 40vh; } body .cell:nth-of-type(17):hover ~ #wrap { -webkit-transform: rotateX(53deg) translateY(165px) scale(0.75); transform: rotateX(53deg) translateY(165px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(18) { top: 42.5vh; } body .cell:nth-of-type(18):hover ~ #wrap { -webkit-transform: rotateX(52deg) translateY(160px) scale(0.75); transform: rotateX(52deg) translateY(160px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(19) { top: 45vh; } body .cell:nth-of-type(19):hover ~ #wrap { -webkit-transform: rotateX(51deg) translateY(155px) scale(0.75); transform: rotateX(51deg) translateY(155px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(20) { top: 47.5vh; } body .cell:nth-of-type(20):hover ~ #wrap { -webkit-transform: rotateX(50deg) translateY(150px) scale(0.75); transform: rotateX(50deg) translateY(150px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(21) { top: 50vh; } body .cell:nth-of-type(21):hover ~ #wrap { -webkit-transform: rotateX(49deg) translateY(145px) scale(0.75); transform: rotateX(49deg) translateY(145px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(22) { top: 52.5vh; } body .cell:nth-of-type(22):hover ~ #wrap { -webkit-transform: rotateX(48deg) translateY(140px) scale(0.75); transform: rotateX(48deg) translateY(140px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(23) { top: 55vh; } body .cell:nth-of-type(23):hover ~ #wrap { -webkit-transform: rotateX(47deg) translateY(135px) scale(0.75); transform: rotateX(47deg) translateY(135px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(24) { top: 57.5vh; } body .cell:nth-of-type(24):hover ~ #wrap { -webkit-transform: rotateX(46deg) translateY(130px) scale(0.75); transform: rotateX(46deg) translateY(130px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(25) { top: 60vh; } body .cell:nth-of-type(25):hover ~ #wrap { -webkit-transform: rotateX(45deg) translateY(125px) scale(0.75); transform: rotateX(45deg) translateY(125px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(26) { top: 62.5vh; } body .cell:nth-of-type(26):hover ~ #wrap { -webkit-transform: rotateX(44deg) translateY(120px) scale(0.75); transform: rotateX(44deg) translateY(120px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(27) { top: 65vh; } body .cell:nth-of-type(27):hover ~ #wrap { -webkit-transform: rotateX(43deg) translateY(115px) scale(0.75); transform: rotateX(43deg) translateY(115px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(28) { top: 67.5vh; } body .cell:nth-of-type(28):hover ~ #wrap { -webkit-transform: rotateX(42deg) translateY(110px) scale(0.75); transform: rotateX(42deg) translateY(110px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(29) { top: 70vh; } body .cell:nth-of-type(29):hover ~ #wrap { -webkit-transform: rotateX(41deg) translateY(105px) scale(0.75); transform: rotateX(41deg) translateY(105px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(30) { top: 72.5vh; } body .cell:nth-of-type(30):hover ~ #wrap { -webkit-transform: rotateX(40deg) translateY(100px) scale(0.75); transform: rotateX(40deg) translateY(100px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(31) { top: 75vh; } body .cell:nth-of-type(31):hover ~ #wrap { -webkit-transform: rotateX(39deg) translateY(95px) scale(0.75); transform: rotateX(39deg) translateY(95px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(32) { top: 77.5vh; } body .cell:nth-of-type(32):hover ~ #wrap { -webkit-transform: rotateX(38deg) translateY(90px) scale(0.75); transform: rotateX(38deg) translateY(90px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(33) { top: 80vh; } body .cell:nth-of-type(33):hover ~ #wrap { -webkit-transform: rotateX(37deg) translateY(85px) scale(0.75); transform: rotateX(37deg) translateY(85px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(34) { top: 82.5vh; } body .cell:nth-of-type(34):hover ~ #wrap { -webkit-transform: rotateX(36deg) translateY(80px) scale(0.75); transform: rotateX(36deg) translateY(80px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(35) { top: 85vh; } body .cell:nth-of-type(35):hover ~ #wrap { -webkit-transform: rotateX(35deg) translateY(75px) scale(0.75); transform: rotateX(35deg) translateY(75px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(36) { top: 87.5vh; } body .cell:nth-of-type(36):hover ~ #wrap { -webkit-transform: rotateX(34deg) translateY(70px) scale(0.75); transform: rotateX(34deg) translateY(70px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(37) { top: 90vh; } body .cell:nth-of-type(37):hover ~ #wrap { -webkit-transform: rotateX(33deg) translateY(65px) scale(0.75); transform: rotateX(33deg) translateY(65px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(38) { top: 92.5vh; } body .cell:nth-of-type(38):hover ~ #wrap { -webkit-transform: rotateX(32deg) translateY(60px) scale(0.75); transform: rotateX(32deg) translateY(60px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(39) { top: 95vh; } body .cell:nth-of-type(39):hover ~ #wrap { -webkit-transform: rotateX(31deg) translateY(55px) scale(0.75); transform: rotateX(31deg) translateY(55px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body .cell:nth-of-type(40) { top: 97.5vh; } body .cell:nth-of-type(40):hover ~ #wrap { -webkit-transform: rotateX(30deg) translateY(50px) scale(0.75); transform: rotateX(30deg) translateY(50px) scale(0.75); -webkit-transition: 0.2s linear; transition: 0.2s linear; } body #wrap { pointer-events: none; display: grid; width: 500px; height: 500px; position: relative; -webkit-transform: rotateX(65deg) translateY(250px) scale(0.75); transform: rotateX(65deg) translateY(250px) scale(0.75); -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; } body #wrap .plane { width: 0px; height: 0px; position: absolute; z-index: 999; top: -40px; left: -40px; -webkit-transform: rotate(-270deg) translateZ(50px) rotateX(90deg); transform: rotate(-270deg) translateZ(50px) rotateX(90deg); offset-path: path("M 60 40 Q 280 20 260 140 Q 80 400 360 380 Q 400 360 400 280 C 380 240 460 160 80 260 C 0 300 0 260 0 440 C 0 560 140 420 240 520 C 280 560 400 540 380 500 C 400 460 340 260 420 300 C 460 320 580 260 560 460 C 560 520 540 580 240 560 C 160 560 160 280 240 220 C 260 180 420 240 480 220 C 560 220 540 20 380 40 C 260 40 280 80 240 200 C 220 280 140 280 40 240 C 0 240 0 40 60 40 "); offset-distance: 0%; -webkit-animation: fly 15s linear infinite, bounce 5s linear infinite alternate; animation: fly 15s linear infinite, bounce 5s linear infinite alternate; } body #wrap .plane .body { position: absolute; -webkit-transform: scale(0.35) scaleZ(0.5) rotateZ(-40deg); transform: scale(0.35) scaleZ(0.5) rotateZ(-40deg); -webkit-animation: flutter 1.5s ease-in-out infinite alternate; animation: flutter 1.5s ease-in-out infinite alternate; } body #wrap .plane .body .wrap { position: absolute; -webkit-transition: 2s ease-in-out; transition: 2s ease-in-out; } @-webkit-keyframes flutter { to { -webkit-transform: scale(0.35) scaleZ(0.5) rotateZ(40deg); transform: scale(0.35) scaleZ(0.5) rotateZ(40deg); } } @keyframes flutter { to { -webkit-transform: scale(0.35) scaleZ(0.5) rotateZ(40deg); transform: scale(0.35) scaleZ(0.5) rotateZ(40deg); } } body #wrap .plane .front .side:after { content: ''; position: absolute; width: 100%; height: 100%; background: #eb5158; -webkit-transform-origin: 50% 120%; transform-origin: 50% 120%; -webkit-transform: rotate(180deg) translateZ(20px) rotateX(105deg) scale(0.9); transform: rotate(180deg) translateZ(20px) rotateX(105deg) scale(0.9); } body #wrap .plane .prop { width: 20px; height: 20px; background: #f6acb0; box-shadow: inset 0 0 0 3px #d6d6d6; position: absolute; border-radius: 100%; top: 20px; -webkit-transform: translateZ(20px) rotate(0deg); transform: translateZ(20px) rotate(0deg); left: -5px; -webkit-animation: prop 0.25s linear infinite; animation: prop 0.25s linear infinite; } @-webkit-keyframes prop { to { -webkit-transform: translateZ(20px) rotate(360deg); transform: translateZ(20px) rotate(360deg); } } @keyframes prop { to { -webkit-transform: translateZ(20px) rotate(360deg); transform: translateZ(20px) rotate(360deg); } } body #wrap .plane .prop:before, body #wrap .plane .prop:after { content: ''; position: absolute; width: 7.5px; height: 30px; background: white; box-shadow: 0 0 0 2px #a3a3a3; left: calc(50% - 3.25px); bottom: calc(50% + 2.5px); border-radius: 10px 10px 0 0; } body #wrap .plane .prop:after { bottom: auto; top: calc(50% + 2.5px); border-radius: 0 0 10px 10px; } body #wrap .plane .fins { height: 30px; width: 10px; background: #fff; box-shadow: 0 0 0 3px #d6d6d6; -webkit-transform: translateZ(-25px) rotateY(90deg); transform: translateZ(-25px) rotateY(90deg); position: absolute; top: 40px; border-radius: 0 0 0 50px; } body #wrap .plane .fins:before { content: ''; position: absolute; width: 5px; height: 100%; top: 0; background: inherit; box-shadow: inherit; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } body #wrap .plane .wings { width: 70px; height: 20px; position: absolute; background: #fff; box-shadow: 0 0 0 3px #d6d6d6; left: -70px; top: 30px; -webkit-transform: translateZ(10px) rotateX(90deg); transform: translateZ(10px) rotateX(90deg); border-radius: 10px 0px 0px 130px / 10px 0 0 75px; } body #wrap .plane .wings:before { content: ''; position: absolute; width: 100%; height: 100%; background: #fff; box-shadow: inherit; -webkit-transform: scaleX(-1); transform: scaleX(-1); left: 80px; border-radius: inherit; } body #wrap .plane .front, body #wrap .plane .rear { position: absolute; left: 0; top: 0; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } body #wrap .plane .front .side, body #wrap .plane .rear .side { height: 20px; width: 10px; position: absolute; -webkit-transform-origin: 50% calc(100% + 10px); transform-origin: 50% calc(100% + 10px); } body #wrap .plane .front .side:before, body #wrap .plane .rear .side:before { content: ''; position: absolute; width: 100%; height: 100%; -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } body #wrap .plane .front .side:nth-of-type(1), body #wrap .plane .rear .side:nth-of-type(1) { -webkit-transform: rotate(45deg); transform: rotate(45deg); } body #wrap .plane .front .s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0