标签：animation name document 效果 for back prot nim uil
<!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>
效果图：
标签：animation name document 效果 for back prot nim uil
原文地址：https://www.cnblogs.com/Mrchenxj/p/10287791.html
