PROMULGATOR

    . 侦??

    上海市
    Html
    Css
    Js

    
                        


                        

                            


main {
	width:300px;
	height:300px;
	border:1px solid transparent;
	perspective:1000px;
	margin:350px auto;
}
#tanke {
	width:200px;
	height:200px;
	/* border:1px solid red;
	*/
        margin:100px auto;
	transform:rotateX(-20deg);
	/* animation:zhuan 10s linear infinite alternate;
	*/
         position:relative;
}
#tanke:hover {
	animation-play-state:paused;
}
div {
	transform-style:preserve-3d;
}
.cheshen {
	width:250px;
	height:50px;
	/* background:black;
	*/
        animation:zhuan1 15s linear infinite alternate;
	position:relative;
	left:0;
}
.head {
	width:80px;
	height:30px;
	/* background:black;
	*/
        position:relative;
	left:100px;
	/* transform:rotateX(-90deg) rotateZ(-45deg) */
        animation:zhuan1 10s linear infinite alternate;
}
@keyframes zhuan {
	0% {
	left:0px;
}
50% {
	left:200px;
	transform:rotateY(180deg);
}
100% {
	left:-300px;
	transform:rotateY(360deg);
}
}@keyframes zhuan1 {
	100% {
	transform:rotateY(360deg);
}
}#tanke:hover .head {
	animation-play-state:paused;
}
/* #tanke:hover .cheshen {
	animation-play-state:paused;
}
*/
    #tanke:active .head {
	top:2px;
	animation-play-state:paused;
}
.head section {
	position:absolute;
	left:0;
	height:0;
	transition:0.5s;
}
.head section::after {
	content:"";
	position:absolute;
}
.head section:nth-child(1) {
	width:80px;
	height:30px;
	background:rgb(212,189,110);
	transform:translateZ(40px);
}
.head section:nth-child(1)::before {
	content:"TanK-21";
	padding-left:10px;
	font-size:15px;
	color:rgb(70,61,33);
}
#tanke:active .head section:nth-child(1) {
	transition:0.5s;
	left:40px;
}
.head section:nth-child(2) {
	width:80px;
	height:30px;
	background:rgb(212,189,110);
	transform:translateZ(-40px);
}
.head section:nth-child(2)::before {
	content:"______ /////";
	color:rgb(70,61,33);
}
#tanke:active .head section:nth-child(2) {
	transition:0.5s;
	left:40px;
}
.head section:nth-child(3) {
	width:80px;
	height:80px;
	background:rgb(240,213,126);
	transform:rotateX(90deg) translateZ(40px);
}
.head section:nth-child(3)::after {
	width:50px;
	height:50px;
	border-radius:50%;
	background:rgb(163,145,86);
	border:5px dashed rgb(128,114,68);
	top:15px;
	left:15px;
}
#tanke:active .head section:nth-child(3) {
	transition:0.5s;
	left:40px;
}
.head section:nth-child(4) {
	width:80px;
	height:30px;
	background:rgb(212,189,110);
	transform:rotateY(90deg) translateZ(40px);
}
.head section:nth-child(4)::after {
	content:"......";
	width:60px;
	height:15px;
	background:rgb(167,148,89);
	font-size:30px;
	line-height:0px;
	text-align:center;
	/* border:1px solid black;
	*/
        color:rgb(110,98,57);
	left:10px;
	top:7px;
}
#tanke:active .head section:nth-child(4) {
	transition:0.5s;
	left:40px;
}
.head section:nth-child(5) {
	width:80px;
	height:50px;
	background:rgb(202,179,103);
	border-bottom:1px dashed rgb(151,132,69);
	transform:rotateY(90deg) rotateX(-60deg) translateZ(-42px) translateY(44px);
}
#tanke:active .head section:nth-child(5) {
	transition:0.5s;
	left:40px;
}
.head section:nth-child(6) {
	width:0;
	height:0;
	border-top:15px solid transparent;
	border-left:30px solid transparent;
	border-bottom:15px solid rgb(212,189,110);
	border-right:30px solid rgb(212,189,110);
	transform:translateZ(40px) translateX(-60px);
}
#tanke:active .head section:nth-child(6) {
	transition:0.5s;
	left:40px;
}
.head section:nth-child(7) {
	width:0;
	height:0;
	border-top:15px solid transparent;
	border-left:30px solid transparent;
	border-bottom:15px solid rgb(212,189,110);
	border-right:30px solid rgb(212,189,110);
	transform:translateZ(-40px) translateX(-60px);
}
#tanke:active .head section:nth-child(7) {
	transition:0.5s;
	left:40px;
}
.head section:nth-child(8) {
	width:200px;
	height:10px;
	background:rgb(187,167,102);
	left:-200px;
	top:10px;
	transform:rotateX(90deg) translateZ(-3px);
	line-height:10px;
}
#tanke:active .head section:nth-child(8) {
	transition:0.3s;
	left:-150px;
}
.head section:nth-child(9) {
	width:200px;
	height:10px;
	background:rgb(187,167,102);
	left:-200px;
	top:10px;
	transform:rotateX(30deg) translateZ(3px);
	font-weight:bold;
	line-height:10px;
}
#tanke:active .head section:nth-child(9) {
	transition:0.3s;
	left:-150px;
}
.head section:nth-child(10) {
	width:200px;
	height:10px;
	background:rgb(187,167,102);
	left:-200px;
	top:10px;
	transform:rotateX(-30deg) translateZ(-3px);
	font-weight:bold;
	line-height:10px;
}
#tanke:active .head section:nth-child(10) {
	transition:0.3s;
	left:-150px;
}
.cheshen section {
	position:absolute;
	left:0;
	height:0;
}
.cheshen section::before {
	content:"";
	position:absolute;
	text-align:center;
	line-height:40px;
	font-size:30px;
}
.cheshen section::after {
	content:"";
	position:absolute;
	text-align:center;
	line-height:40px;
	font-size:30px;
}
.cheshen section:nth-child(1) {
	width:250px;
	height:50px;
	background:rgb(187,167,102);
	transform:translateZ(60px);
}
@keyframes lunzi {
	100% {
	transform:rotate(360deg);
}
}.cheshen section:nth-child(1)::before {
	content:"";
	width:20px;
	height:20px;
	border-radius:50%;
	border-left:10px solid transparent;
	border-right:10px solid rgb(141,125,71);
	border-top:10px solid rgb(141,125,71);
	border-bottom:10px solid rgb(141,125,71);
	top:5px;
	left:10px;
	animation:lunzi 2s linear infinite;
	background:rgb(165,146,84);
}
.cheshen section:nth-child(1)::after {
	content:"";
	width:20px;
	height:20px;
	border-radius:50%;
	border-left:10px solid transparent;
	border-right:10px solid rgb(141,125,71);
	border-top:10px solid rgb(141,125,71);
	border-bottom:10px solid rgb(141,125,71);
	top:5px;
	right:15px;
	animation:lunzi 2s linear infinite;
	background:rgb(165,146,84);
}
.cheshen section:nth-child(2) {
	width:250px;
	height:50px;
	background:rgb(187,167,102);
	transform:translateZ(-60px);
}
.cheshen section:nth-child(2)::before {
	content:"";
	width:20px;
	height:20px;
	border-radius:50%;
	border-left:10px solid transparent;
	border-right:10px solid rgb(141,125,71);
	border-top:10px solid rgb(141,125,71);
	border-bottom:10px solid rgb(141,125,71);
	top:5px;
	left:10px;
	animation:lunzi 2s linear infinite;
	background:rgb(165,146,84);
}
.cheshen section:nth-child(2)::after {
	content:"";
	width:20px;
	height:20px;
	border-radius:50%;
	border-left:10px solid transparent;
	border-right:10px solid rgb(141,125,71);
	border-top:10px solid rgb(141,125,71);
	border-bottom:10px solid rgb(141,125,71);
	top:5px;
	right:15px;
	animation:lunzi 2s linear infinite;
	background:rgb(165,146,84);
}
.cheshen section:nth-child(3) {
	width:250px;
	height:120px;
	background:rgb(187,167,102);
	transform:rotateX(90deg) translateZ(60px);
}
.cheshen section:nth-child(4) {
	width:250px;
	height:120px;
	background:rgb(187,167,102);
	transform:rotateX(90deg) translateZ(10px);
}
.cheshen section:nth-child(5) {
	width:120px;
	height:50px;
	background:rgb(172,153,93);
	top:-60px;
	left:95px;
	transform:rotateX(90deg) rotateY(-60deg) rotateZ(90deg) translateZ(-125px);
}
.cheshen section:nth-child(5)::before {
	content:"...............";
	width:110px;
	height:5px;
	background:rgb(136,121,73);
	top:5px;
	left:5px;
	line-height:5px;
	text-align:center;
	color:rgb(88,79,45);
}
.cheshen section:nth-child(5)::after {
	content:"";
	width:90px;
	height:30px;
	background:rgb(136,121,73);
	bottom:0px;
	left:15px;
	line-height:5px;
	text-align:center;
}
.cheshen section:nth-child(6) {
	width:120px;
	height:50px;
	background:rgb(172,153,93);
	transform:rotateX(90deg) rotateY(5deg) rotateZ(90deg)  translateZ(-125px);
	top:-146px;
	left:202px;
}
.cheshen section:nth-child(7) {
	width:0;
	height:0;
	border-top:25px solid transparent;
	border-left:70px solid transparent;
	border-bottom:25px solid rgb(187,167,102);
	border-right:70px solid rgb(187,167,102);
	left:-75px;
	transform:translateZ(-61px) translateX(-60px);
}
.cheshen section:nth-child(7)::before {
	content:"";
	width:20px;
	height:20px;
	border-radius:50%;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-top:10px solid rgb(141,125,71);
	border-bottom:10px solid rgb(141,125,71);
	top:-20px;
	right:-240px;
	animation:lunzi 1s linear infinite;
	background:rgb(165,146,84);
}
.cheshen section:nth-child(7)::after {
	content:"";
	width:20px;
	height:20px;
	border-radius:50%;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-top:10px solid rgb(141,125,71);
	border-bottom:10px solid rgb(141,125,71);
	top:-20px;
	right:-180px;
	animation:lunzi 1s linear infinite;
	background:rgb(165,146,84);
}
.cheshen section:nth-child(8) {
	width:0;
	height:0;
	border-top:25px solid transparent;
	border-left:70px solid transparent;
	border-bottom:25px solid rgb(187,167,102);
	border-right:70px solid rgb(187,167,102);
	left:-75px;
	transform:translateZ(61px) translateX(-60px);
}
.cheshen section:nth-child(8)::before {
	content:"";
	width:20px;
	height:20px;
	border-radius:50%;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-top:10px solid rgb(141,125,71);
	border-bottom:10px solid rgb(141,125,71);
	top:-20px;
	right:-240px;
	animation:lunzi 1s linear infinite;
	background:rgb(165,146,84);
}
.cheshen section:nth-child(8)::after {
	content:"";
	width:20px;
	height:20px;
	border-radius:50%;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-top:10px solid rgb(141,125,71);
	border-bottom:10px solid rgb(141,125,71);
	top:-20px;
	right:-180px;
	animation:lunzi 1s linear infinite;
	background:rgb(165,146,84);
}
.cheshen section:nth-child(9) {
	width:120px;
	height:90px;
	background:rgb(172,153,93);
	top:85px;
	left:-35px;
	transform:rotateX(90deg) rotateY(-30deg) rotateZ(90deg) translateZ(125px);
}
.cheshen section:nth-child(9)::before {
	content:"";
	width:0px;
	height:0px;
	border-left:30px solid white;
	border-right:10px solid transparent;
	border-top:10px solid rgb(207,203,195);
	border-bottom:10px solid transparent;
	left:0;
	top:20px;
}
.cheshen section:nth-child(9)::after {
	content:"";
	width:0px;
	height:0px;
	border-left:10px solid transparent;
	border-right:30px solid white;
	border-top:10px solid rgb(207,203,195);
	border-bottom:10px solid transparent;
	right:0;
	top:20px;
}


                        

                        



                        

                   

                    
                   

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

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
3D坦克（原创）

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
里面没有用到任何js噢，根据个人爱好所写，自己感觉还挺好看哦，喜欢的小伙伴也可以自己做啊，只要用心！！加油

                         

                     

                   
                


                
0