PROMULGATOR

    . 侦??

    上海市
    Html
    Css
    Js

    
                        


                        

                            


* {
	margin:0 auto;
}
html {
	height:100%;
}
body {
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	background:rgb(7,83,83);
	perspective:3000px;
	/*滤镜形成阴影效果*/
        filter:-shadow(0px 120px 10px rgba(0,0,0,0.5));
	overflow:hidden;
}
main {
	width:500px;
	height:400px;
	border:1px solid transparent;
	/* perspective:3000px;
	*/
        transform-style:preserve-3d;
	/* transform:rotateX(-100deg);
	*/
        animation:dong 20s linear infinite alternate;
	cursor:pointer;
}
@keyframes dong {
	0% {
	}50% {
	transform:rotateX(-80deg) rotateY(-80deg) rotateZ(0deg);
}
100% {
	transform:rotateX(80deg) rotateY(80deg) rotateZ(45deg);
}
}div {
	transform-style:preserve-3d;
	/* transform:rotateX(90deg);
	*/
}
#feiji {
	width:500px;
	height:300px;
	/* background:teal;
	*/
        position:relative;
	/* transform:rotateX(-30deg);
	*/
         /* border:1px solid white;
	*/
         /* transform:rotateY(-90deg);
	*/
         animation:zhuan1 10s linear infinite alternate;
}
@keyframes zhuan1 {
	0% {
	transform:rotateX(-40deg);
}
100% {
	transform:rotateX(30deg)
}
}#tou {
	width:170px;
	height:50px;
	/* background:red;
	*/
        position:absolute;
	left:0;
	top:125px;
	transform:rotateZ(-7deg);
}
#tou div {
	width:0px;
	height:0px;
	border-top:25px solid transparent;
	border-bottom:25px solid transparent;
	border-left:0px solid transparent;
	border-right:170px solid yellow;
	position:absolute;
	transform:rotateX(90deg);
}
#tou .tou-t {
	border-right:170px solid rgb(180,180,179);
	transform:rotateX(0deg)  rotateY(8deg) translateZ(-12px);
}
#tou .tou-t::before {
	content:'J - 30';
	width:100px;
	color:white;
	font-size:18px;
	font-weight:bold;
	position:absolute;
	left:110px;
	top:-5px;
	font-family:黑体;
	transform:rotate(5deg);
}
#tou .tou-b {
	border-right:170px solid rgb(180,180,179);
	transform:rotateX(0deg)  rotateY(-8deg) translateZ(12px);
}
#tou .tou-b::before {
	content:'J - 30';
	width:100px;
	color:white;
	font-size:18px;
	font-weight:bold;
	position:absolute;
	left:110px;
	top:-5px;
	font-family:黑体;
	transform:rotate(5deg);
}
#tou .tou-l {
	border-right:170px solid rgb(214,214,214);
	/* transform-origin:0% 0%;
	*/
     transform:rotateX(90deg) rotateY(8.5deg);
	top:13px;
}
#tou .tou-r {
	border-right:170px solid rgb(180,180,179);
	transform:rotateX(90deg) rotateY(-8.5deg);
	top:-13px;
}
#tou .tou-r::before {
	content:'';
	width:0;
	height:0;
	border-top:20px solid transparent;
	border-bottom:20px solid transparent;
	border-left:0px solid transparent;
	border-right:50px solid rgb(73,73,73);
	position:absolute;
	left:120px;
	top:-20px;
}
#jishen {
	width:180px;
	height:50px;
	/* background:tomato;
	*/
        position:absolute;
	top:125px;
	left:170px;
}
#jishen div {
	width:1px;
	height:30px;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
	border-right:0px solid transparent;
	border-left:179px solid rgb(180,180,179);
	position:absolute;
	transform:rotateX(0deg);
}
#jishen .jishen-t {
	border-left:185px solid rgb(180,180,179);
	transform:rotateX(90deg) rotateY(2deg) translateX(-5px);
	top:-31px;
}
#jishen .jishen-t::before {
	content:'';
	width:0;
	height:0;
	border-top:20px solid transparent;
	border-bottom:20px solid transparent;
	border-left:80px solid rgb(73,73,73);
	border-right:0px solid transparent;
	position:absolute;
	left:-185px;
	top:-5px;
}
#jishen .jishen-b {
	border-left:179px solid rgb(214,214,214);
	transform:rotateX(90deg) rotateY(-6deg);
	top:7px;
}
#jishen .jishen-l {
	width:1px;
	height:25px;
	border-top:26px solid transparent;
	border-bottom:0px solid transparent;
	border-right:0px solid transparent;
	border-left:185px solid rgb(180,180,179);
	transform:rotateX(0deg) rotateY(3deg) rotateZ(-6deg) translateZ(20px) translateX(-4px);
	top:-20px;
}
#jishen .jishen-r {
	width:1px;
	height:25px;
	border-top:26px solid transparent;
	border-bottom:0px solid transparent;
	border-right:0px solid transparent;
	border-left:185px solid rgb(180,180,179);
	transform:rotateX(0deg) rotateY(-3deg) rotateZ(-6deg) translateZ(-20px) translateX(-5px);
	top:-20px;
}
#jishen  #yi {
	/* background:yellow;
	*/
         position:absolute;
	width:1px;
	height:25px;
	border-top:50px solid transparent;
	border-bottom:0px solid transparent;
	border-right:0px solid transparent;
	border-left:165px solid rgb(180,180,179);
	/* transform:rotateX(-90deg);
	*/
}
#jishen #yi::before {
	content:'';
	position:absolute;
	width:1px;
	height:25px;
	border-top:50px solid transparent;
	border-bottom:0px solid transparent;
	border-right:0px solid transparent;
	border-left:164px solid rgb(121,121,119);
	right:0;
	top:-50px;
	transform:scale(0.8) translateX(-20px);
}
#jishen  .yi-l {
	transform:rotateX(-98deg) rotateZ(-90deg) translateX(100px);
	position:absolute;
	top:-20px;
	left:-20px;
}
#jishen  .yi-r {
	transform:rotateX(98deg)  rotateZ(-90deg) translateX(100px);
	position:absolute;
	top:-20px;
	left:-20px;
}
#wei {
	width:100px;
	height:40px;
	/* background:red;
	*/
        position:absolute;
	right:50px;
	top:123px;
}
#wei div {
	width:1px;
	height:15px;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	border-right:0px solid transparent;
	border-left:40px solid rgb(250,41,41);
	position:absolute;
	transform:rotateX(0deg);
}
#wei .wei-l {
	transform:rotateX(0deg) rotateY(10deg) rotateZ(-2deg) translateZ(11px);
}
#wei .wei-l::after {
	content:'';
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	border-right:0px solid transparent;
	border-left:40px solid rgb(250,41,41);
	position:absolute;
	left:0px;
	transform:rotateX(0deg);
	opacity:0;
	transition:0.5s;
}
#wei .wei-r {
	transform:rotateX(0deg) rotateY(-10deg) rotateZ(-2deg) translateZ(-11px);
}
#wei .wei-r::after {
	content:'';
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	border-right:0px solid transparent;
	border-left:40px solid rgb(250,41,41);
	position:absolute;
	left:0px;
	transform:rotateX(0deg);
	opacity:0;
	transition:0.5s;
}
#wei .wei-t {
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
	border-left:45px solid rgb(250,41,41);
	transform:rotateX(90deg) rotateY(4deg);
	top:-14px;
	left:-3px;
}
#wei .wei-t::after {
	content:'';
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	border-right:0px solid transparent;
	border-left:40px solid rgb(202,243,19);
	position:absolute;
	left:0px;
	transform:rotateX(0deg);
	opacity:0;
	transition:0.5s;
}
#wei .wei-b {
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
	border-left:45px solid rgb(250,41,41);
	transform:rotateX(90deg) rotateY(-10deg);
	top:5px;
	left:-3px;
}
#wei .wei-b::after {
	content:'';
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	border-right:0px solid transparent;
	border-left:40px solid rgb(202,243,19);
	position:absolute;
	left:0px;
	transform:rotateX(0deg);
	opacity:0;
	transition:0.5s;
}
main:hover #wei div::after {
	left:20px;
	opacity:1;
}
#wei .wei-yt {
	top:-38px;
	width:1px;
	height:15px;
	border-top:20px solid transparent;
	border-bottom:0px solid transparent;
	border-right:0px solid transparent;
	border-left:45px solid rgb(180,180,179);
	transform:rotateZ(-83deg);
}
#wei .wei-yl {
	height:10px;
	border-top:15px solid transparent;
	border-bottom:0px solid transparent;
	border-right:0px solid transparent;
	border-left:35px solid rgb(180,180,179);
	transform:rotateY(-90deg) rotateX(-100deg) translateX(28px) rotateZ(10deg);
	left:7px;
}
#wei .wei-yr {
	height:10px;
	border-top:15px solid transparent;
	border-bottom:0px solid transparent;
	border-right:0px solid transparent;
	border-left:35px solid rgb(180,180,179);
	transform:rotateY(90deg) rotateX(100deg) translateX(28px) rotateZ(10deg);
	left:7px;
}
#feng {
	width:200px;
	height:2px;
	background:white;
	position:absolute;
	transform:rotateX(30deg);
	opacity:0;
	filter:blur(2px);
}
#feng:nth-child(2) {
	left:150px;
	transform:translateZ(100px) translateY(-50px) rotateX(30deg);
}
#feng:nth-child(3) {
	top:-0px;
	left:100px;
	transform:translateY(0px) rotateX(30deg);
}
#feng:nth-child(4) {
	top:-50px;
	left:300px;
	transform:translateZ(-150px) rotateX(30deg) translateY(150px);
}
@keyframes move {
	0% {
	opacity:0;
}
20% {
	opacity:0.8;
}
100% {
	opacity:0;
	left:400px;
}
}main:hover #feng {
	animation:move 3s linear -1s infinite;
}
main:active #wei div::after {
	animation:move1 1s linear -1s infinite;
}
@keyframes move1 {
	0% {
	opacity:0;
	left:0;
}
100% {
	opacity:1;
	left:20px;
}
}

                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
CSS 3D战斗机

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
body 内有阴影效果，部分浏览器目前不太支持，若图像不完整可以选择注释掉

                         

                     

                   
                


                
0