<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="3D城市模型,3D" />
<meta name="description" content="描述信息" />
<title>3D城市模型-面向对象-自定义组件</title>
<style type="text/css">
*{
margin: 0;
}
html,body{width: 100%;height: 100%; perspective: 700px;}
div,b,i{
position:absolute;
transform-style: preserve-3d;
}
#City3D{
background:#31c2ca ;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 10px solid #a3d0eb;
animation: raotateZcity 10s linear infinite;
}
#City3D div b{
height: 100%;
animation: day2dusk 10s linear infinite;
transform: rotateX(90deg);
transform-origin: 0 0;
}
#City3D div b >b{
animation: night2dawn 10s linear infinite;
transform: rotateY(90deg);
}
#City3D div b > b > b{
animation: dawn2day 5s linear infinite;
transform: rotateY(90deg);
transform-origin: 100% 0;
right: 0;
}
#City3D div b > b > b > b{
animation: dusk2night 5s linear infinite;
transform: rotateY(90deg);
left: 0;
transform-origin: 0 100%;
}
#City3D div b > b > b > b > i{
background:rgba(176,208,223,0.9);
transform: rotateX(-90deg);
bottom: 1px;
transform-origin: 0 100%;
}
@keyframes raotateZcity{
from{transform: rotateX(60deg) rotateZ(-180deg);}
to{transform: rotateX(60deg) rotateZ(180deg);}
}
@keyframes night2dawn {
from {
background-image: linear-gradient(to bottom, rgba(0, 127, 255, 1) 0%, rgba(240, 255, 255, 1) 100%);
}
to {
background-image: linear-gradient(to bottom, rgba(150, 0, 2, 1) 0%, rgba(255, 170, 0, 1) 20%, rgba(255, 255, 0, 1) 47%, rgba(135, 128, 133, 1) 79%, rgba(35, 33, 35, 1) 100%);
}
}
@keyframes dawn2day {
from {
background-image: linear-gradient(to bottom, rgba(0, 127, 255, 1) 0%, rgba(240, 255, 255, 1) 100%);
}
to {
background-image: linear-gradient(to bottom, rgba(150, 0, 2, 1) 0%, rgba(255, 170, 0, 1) 20%, rgba(255, 255, 0, 1) 47%, rgba(135, 128, 133, 1) 79%, rgba(35, 33, 35, 1) 100%);
}
}
@keyframes day2dusk {
from {
background-image: linear-gradient(to bottom, rgba(0, 127, 255, 1) 0%, rgba(240, 255, 255, 1) 100%);
}
to {
background-image: linear-gradient(to bottom, rgba(150, 0, 2, 1) 0%, rgba(255, 170, 0, 1) 20%, rgba(255, 255, 0, 1) 47%, rgba(135, 128, 133, 1) 79%, rgba(35, 33, 35, 1) 100%);
}
}
@keyframes dusk2night {
from {
background-image: linear-gradient(to bottom, rgba(0, 127, 255, 1) 0%, rgba(240, 255, 255, 1) 100%);
}
to {
background-image: linear-gradient(to bottom, rgba(150, 0, 2, 1) 0%, rgba(255, 170, 0, 1) 20%, rgba(255, 255, 0, 1) 47%, rgba(135, 128, 133, 1) 79%, rgba(35, 33, 35, 1) 100%);
}
}
</style>
</head>
<body>
<script>
function City3D(base){
this.base=base;
this.max=50;
}
//创建一个地皮
City3D.prototype.buildArea=function(parent){
this.city=document.createElement("div");
this.city.id="City3D";
var sizeWidth=this.max*this.base;
this.city.style.width=this.city.style.height=sizeWidth+"px";
parent.appendChild(this.city);
}
City3D.prototype.genSize=function(){
return (Math.random()*1000<<2)%130+20;
}
City3D.prototype.genHeight=function(){
return (Math.random()*1000<<2)%20+20;
}
//创建一栋楼
City3D.prototype.buildEsate=function(top,left){
var estate=document.createElement("div");
estate.className="b";
estate.style.height=this.genSize()+"px";
estate.style.width=w+"px";
estate.style.top=top+"px";
estate.style.left=left+"px";
this.city.appendChild(estate);
var l=this.genHeight();
var w=this.genHeight();
var b=document.createElement("b");
b.style.width=l+"px";
estate.appendChild(b);
var b1=document.createElement("b");
b1.style.width=w+"px";
b.appendChild(b1);
var b2=document.createElement("b");
b2.style.width=l+"px";
b1.appendChild(b2);
var b3=document.createElement("b");
b3.style.width=w+"px";
b2.appendChild(b3);
var b4=document.createElement("i");
b4.style.width=w+"px";
b4.style.height=l+"px";
b3.appendChild(b4);
}
//js原型
City3D.prototype.build=function(parent){
this.buildArea(parent);
for(var i=0;i<this.base;i++)
{
for(var j=0;j<this.base;j++){
this.buildEsate(i*this.max,j*this.max);
}
}
}
new City3D(8).build(document.body);
</script>
</body>
</html>
效果图: