css实现3d城市效果
代码语言：html
所属分类：三维
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D City Animation Pure CSS</title>
<style>
/* Variables */
:root {
--bg: #DBDBDB;
--gray: #393F4D;
--gray-l: #f5f5f5;
--cyan: #B6E4E6;
--green: #51E5FF;
--yellow: #FDE74C;
}
/* Reset */
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
text-rendering: optimizeLegibility;
user-select: none;
}
/* Tag */
html {
font-family: sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
background: var(--bg);
}
main {
min-width: 800px;
height: 300px;
position: relative;
transform-style: preserve-3d;
animation: rotate-container 10s infinite ease-in-out alternate;
}
/* Components */
.way {
position: absolute;
top: 0;
width: 350px;
height: 350px;
background: var(--gray);
border: 50px solid var(--gray-l);
transform: rotateX(90deg);
transform-style: preserve-3d;
border-radius: 15px;
box-shadow: 2px 2px 100px 0px rgba(0,0,0,0.1);
}
.way-l {
left: 0;
}
.way-r {
right: 0;
display: flex;
}
.ad {
position: absolute;
top: 150px;
left: 80px;
transform: rotateY(-20deg);
font-size: 10px;
padding: 2px 5px;
letter-spacing: 2px;
border-radius: 2px;
color: white;
background: var(--gray);
border: 1px solid white;
animation: ad-sale 1s linear infinite 1s;
}
.txt {
position: absolute;
top: 50px;
left: calc(50% - 75px);
width: 150px;
font-size: 20px;
padding: 3px 5px;
letter-spacing: 2px;
text-align: center;
color: white;
background: var(--gray);
border-radius: 4px;
box-shadow: 3px 3px 100px 3px rgba(0,0,0,0.2);
}
.way-r .cube {
height: 300px;
width: 100px;
transform:
rotateX(90deg)
rotateY(180deg)
rotateZ(180deg)
translateY(-80px)
translateX(20px)
translateZ(-10px)
scale(.5);;
}
.bridge {
width: 50px;
height: 100px;
background: var(--green);
position: absolute;
}
.bridge-l {
transform:
rotateX(90deg)
rotateZ(90deg)
translateY(-275px)
translateZ(-125px)
translateX(150px);
animation: move-bridge-l 15s linear infinite;
border-top: 5px solid var(--gray);
border-bottom: 5px solid var(--gray);
}
.bridge-r {
transform:
rotateX(90deg)
rotateZ(90deg)
translateY(-475px)
translateZ(-125px)
translateX(150px);
animation: move-bridge-r 15s linear infinite;
border-top: 5px solid var(--gray);
border-bottom: 5px solid var(--gray);
}
.cube {
height: 300px;
width: 100px;
position: relative;
z-index: 300;
transform-style: preserve-3d;
transform:
rotateX(90deg)
rotateY(180deg)
rotateZ(180deg)
translateY(-120px)
translateX(80px)
translateZ(-10px)
scale(.75);;
}
.cube__face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
padding-top: 5px;
padding-bottom: 20px;
background: white;
border: 2px solid white;
border-bottom: 2px solid var(--gray);
}
.cube__face:hover {
border: 2px solid var(--green);
cursor: pointer;
}
.cube__window {
height: 20px;
width: 100px;
margin: 5px 7px 0px;
border-radius: 3px;
background: var(--gray-l);
}
.cube__window-light-1 {
animation: window-light 4.8s linear infinite .25s;
}
.cube__window-light-2 {
animation: window-light 3.3s linear infinite;
}
.cube__window-light-3 {
animation: window-light 4.2s linear infinite 2s;
}
.cube__window-light-4 {
animation: window-light 3s linear infinite;
}
.cube__window-light-5 {
animation: window-light 2.5s linear infinite 1s;
}
.cube__door {
height: 40px;
width: 60%;
background: var(--gray);
border-top-left-radius: 2px;
border-top-right-radius: 2px;
align-self: flex-end;
border-bottom: 0;
}
.cube__face--front {
transform: rotateY(0deg) translateZ(50px);
padding-bottom: 0px;
}
.cube__face--back {
transform: rotateY(180deg) translateZ(50px);
}
.cube__face--right {
transform: rotateY(90deg) translateZ(50px);
}
.cube__face--left {
transform: rotateY(-90deg) translateZ(50px);
}
.cube__face--top {
transform: rotateX(90deg) translateZ(50px);
height: 100px;
border: 8px solid white;
background: var(--gray-l);
}
.cube__face--bottom {
transform: rotateX(-90deg) translateZ(250px);
height: 100px;
background-color: var(--gray);
}
.truck {
display: flex;
align-items: flex-end;
height: 20px;
width: 40px;
transform-style: preserve-3d;
position: relative;
z-index: 100;
transform:
translateX(310px)
translateY(150px)
translateZ(150px)
rotateY(-90deg);
animation: truck-animation 15s linear infinite;
}
.truck-f {
height: 13px;
width: 10px;
margin-right: 1px;
}
.truck-f__face {
height: 13px;
width: 10px;
position: absolute;
background: var(--cyan);
}
.truck-f--front {
transform: rotateY(0deg) translateZ(5px);
background-image:
linear-gradient(
to bottom,
var(--cyan) 0px,
var(--cyan) 6px,
var(--green) 6px,
var(--green) 11px,
var(--gray) 11px
);
}
.truck__handle {
background: var(--gray);
height: 1px;
width: 3px;
}
.truck-f--front .truck__handle {
transform: rotateY(0deg) translateX(6px) translateY(8px) translateZ(5px);
}
.truck-f--back {
transform: rotateY(180deg) translateZ(5px);
background-image:
linear-gradient(
to bottom,
var(--cyan) 0px,
var(--cyan) 6px,
var(--green) 6px,
var(--green) 11px,
var(--gray) 11px
);
}
.truck-f--back .truck__handle {
transform: rotateY(180deg) translateX(-1px) translateY(8px) translateZ(5px);
}
.truck-f--left {
transform: rotateY(-90deg) translateZ(5px);
background-image:
linear-gradient(
to bottom,
var(--cyan) 0px,
var(--cyan) 6px,
var(--green) 6px,
var(--green) 11px,
var(--gray) 11px
);
}
.truck-f--right {
transform: rotateY(90deg) translateZ(5px);
}
.truck-f--top {
height: 10px;
transform: rotateX(90deg) translateZ(5px);
background-color: var(--green);
}
.truck-f--bottom {
height: 10px;
transform: rotateX(-90deg) translateZ(8px);
}
.truck-b {
height: 20px;
width: 30px;
}
.truck-b__face {
height: 20px;
width: 30px;
position: absolute;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
.truck-b--front {
transform: rotateY(0deg) translateZ(5px);
border-bottom: 2px solid var(--gray);
}
.truck-b--back {
transform: rotateY(180deg) translateZ(5px);
border-bottom: 2px solid var(--gray);
}
.truck-b--left {
width: 10px;
transform: rotateY(-90deg) translateZ(5px);
}
.truck-b--right {
width: 10px;
transform: rotateY(90deg) translateZ(25px);
border-bottom: 2px solid var(--gray);
}
.truck-b--top {
height: 10px;
transform: rotateX(90deg) translateZ(5px);
}
.truck-b--bottom {
height: 10px;
transform: rotateX(-90deg) translateZ(15px);
}
.truck-ls {
display: flex;
justify-content: space-between;
height: 2px;
width: 8px;
transform: rotateY(-90deg) translateY(-1px) translateZ(4px);
position: absolute;
}
.truck-l {
height: 1px;
width: 1px;
border-radius: 50%;
background: var(--window);
}
.truck-l:nth-of-type(2) {
height: 1px;
width: 3px;
border-radius: 3px;
}
.truck-l:nth-of-type(1),
.truck-l:nth-of-type(3) {
animation: truck-light .5s infinite ease-in;
}
.truck-w {
height: 4px;
width: 4px;
border-radius: 50%;
position: absolute;
animation: truck-wheel .075s infinite linear alternate;
}
.truck-w--lf {
transform: rotateY(0deg) translateX(1px) translateY(1.5px) translateZ(5px);
}
.truck-w--lb {
transform: rotateY(180deg) translateX(-1px) translateY(1.5px) translateZ(5px);
}
.truck-w--rf {
transform: rotateY(0deg) translateX(25px) translateY(1.5px) translateZ(5px);
}
.truck-w--rb {
transform: rotateY(180deg) translateX(-25px) translateY(1.5px) translateZ(5px);
}
.truck-w--rf-2 {
transform: rotateY(0deg) translateX(30px) translateY(1.5px) translateZ(5px);
}
.truck-w--rb-2 {
transform: rotateY(180deg) translateX(-30px) translateY(1.5px) translateZ(5px);
}
/* Animations */
@keyframes rotate-container {
0% {
transform:
perspective(2000px)
translateZ(-250px)
rotate3d(-300,0,0,10deg)
rotateY(-45deg);
}
100% {
transform:
perspective(2000px)
translateZ(-250px)
rotate3d(-300,0,0,15deg)
rotateY(45deg);
}
}
@keyframes move-bridge-l {
0%, 25%, 26%, 100% {
transform:
rotateX(90deg)
rotateZ(90deg)
translateY(-275px)
translateZ(-125px)
translateX(150px);
background: var(--yellow);
}
42%, 96% {
transform:
rotateX(90deg)
rotateZ(90deg)
translateY(-325px)
translateZ(-125px)
translateX(150px);
background: var(--green);
}
}
@keyframes move-bridge-r {
0%, 25%, 26%, 100% {
transform:
rotateX(90deg)
rotateZ(90deg)
translateY(-475px)
translateZ(-125px)
translateX(150px);
background: var(--yellow);
}
42%, 96% {
transform:
rotateX(90deg)
rotateZ(90deg)
translateY(-425px)
translateZ(-125px)
translateX(150px);
background: var(--green);
}
}
@keyframes truck-animation {
0% {
transform:
translateX(310px)
translateY(150px)
translateZ(150px)
scale(1.5)
rotateY(-90deg);
}
9% {
transform:
translateX(310px)
translateY(150px)
translateZ(-150px)
rotateY(-90deg);
}
10% {
transform:
translateX(310px)
translateY(150px)
translateZ(-150px)
rotateY(0deg);
}
19% {
transform:
translateX(0px)
translateY(150px)
translateZ(-150px)
rotateY(0deg);
}
20% {
transform:
translateX(0px)
translateY(150px)
translateZ(-150px)
rotateY(90deg);
}
29% {
transform:
translateX(0px)
translateY(150px)
translateZ(150px)
rotateY(90deg);
}
30% {
transform:
translateX(0px)
translateY(150px)
translateZ(150px)
rotateY(180deg);
}
59% {
transform:
translateX(750px)
translateY(150px)
translateZ(150px)
rotateY(180deg);
}
60% {
transform:
translateX(750px)
translateY(150px)
translateZ(150px)
rotateY(270deg);
}
69% {
transform:
translateX(750px)
translateY(150px)
translateZ(-150px)
rotateY(270deg);
}
70% {
transform:
translateX(750px)
translateY(150px)
translateZ(-150px)
rotateY(360deg);
}
79% {
transform:
translateX(450px)
translateY(150px)
translateZ(-150px)
rotateY(360deg);
}
80% {
transform:
translateX(450px)
translateY(150px)
translateZ(-150px)
rotateY(450deg);
}
89% {
transform:
translateX(450px)
translateY(150px)
translateZ(150px)
rotateY(450deg);
}
90% {
transform:
translateX(450px)
translateY(150px)
translateZ(150px)
rotateY(360deg);
}
99% {
transform:
translateX(310px)
translateY(150px)
translateZ(150px)
rotateY(360deg);
}
100% {
transform:
translateX(310px)
translateY(150px)
translateZ(150px)
rotateY(360deg);
}
}
@keyframes truck-light {
0% {
opacity: .3;
}
100% {
opacity: 1;
}
}
@keyframes truck-wheel {
0% {
border: 1px solid bla.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0