css实现三维飞机绕高楼大厦飞行动画效果代码-html代码-BFW代码库

代码语言：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 .side:nth-of-type(1):before,body #wrap .plane .front .side:nth-of-type(1):after,body #wrap .plane .rear .side:nth-of-type(1):before,body #wrap .plane .rear .side:nth-of-type(1):after {
	background:#ec5a61;
}
body #wrap .plane .front .side:nth-of-type(1):after,body #wrap .plane .rear .side:nth-of-type(1):after {
	box-shadow:0 0 0 2px #ec5a61;
}
body #wrap .plane .front .side:nth-of-type(2),body #wrap .plane .rear .side:nth-of-type(2) {
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
}
body #wrap .plane .front .side:nth-of-type(2):before,body #wrap .plane .front .side:nth-of-type(2):after,body #wrap .plane .rear .side:nth-of-type(2):before,body #wrap .plane .rear .side:nth-of-type(2):after {
	background:#ed636a;
}
body #wrap .plane .front .side:nth-of-type(2):after,body #wrap .plane .rear .side:nth-of-type(2):after {
	box-shadow:0 0 0 2px #ed636a;
}
body #wrap .plane .front .side:nth-of-type(3),body #wrap .plane .rear .side:nth-of-type(3) {
	-webkit-transform:rotate(135deg);
	transform:rotate.........完整代码请登录后点击上方下载按钮下载查看