adobe dreamweaver
新建html文档。
书写hmtl代码。
书写css代码。body { position: relative; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: radial-gradient(circle at center, #1f1925, #2c2334); overflow: hidden; }body:before, body:after { content: ''; position: absolute; width: 200%; height: 50%; left: -50%; top: calc(50% + 10px); background: #644350; }body:after { z-index: -1; height: calc(50% + 500px); top: -250px; background: linear-gradient(to top, #1f1925, rgba(255, 255, 255, 0)), radial-gradient(circle at center, #fcb3a4, #fcb3a4 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 20px), radial-gradient(circle at center, #fcb3a4, #fcb3a4 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 20px); background-size: 100%, 100px 100px, 100px 100px; background-position: 50%, 40px 40px, 0px 90px; opacity: 0.75; transform-style: preserve-3d; an imation: starwipe 10s linear infinite; }@keyframes starwipe { 0% { transform: skewX(20deg);} 50% { transform: skewX(0deg);} 100% { transform: skewX(20deg);}}
书写css3动画特效代码。body .lt { position: absolute; z-index: 9; width: 40%; height: 100%; left: 0; top: 0; }body .lt:hover ~ .wrap { perspective-origin: 75% 50%; }body .rt { position: absolute; z-index: 9; width: 40%; height: 100%; right: 0; top: 0; }body .rt:hover ~ .wrap { perspective-origin: 25% 50%; }body .wrap { width: 400px; height: 200px; perspective: 20px; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); transition: 0.4s ease-in-out; }body .wrap .cube { width: 100%; height: 200%; position: absolute; transform-style: preserve-3d; transform: rotateX(0deg); }body .wrap .cube .face { margin: 0; width: 400px; height: 100%; display: block; position: absolute; }body .wrap .cube .face:nth-of-type(1) { transform: rotateY(0deg) translateZ(200px); }body .wrap .cube .face:nth-of-type(2) { transform: rotateX(180deg) translateZ(200px); }body .wrap .cube .face:nth-of-type(3) { transform: rotateY(90deg) translateZ(200px); }body .wrap .cube .face.building1 { margin-left: -500px; transform: rotateY(-90deg) translateZ(25px); transform-style: preserve-3d; background: #835768; width: 50px; height: 800px; bottom: 0px; an imation: lefttoright 7s ease-in-out infinite; }body .wrap .cube .face.building1.outer { margin-left: -2000px; an imation-duration: 10s; }body .wrap .cube .face.building1:nth-of-type(1) { an imation-delay: -0.75s; }body .wrap .cube .face.building1:nth-of-type(2) { an imation-delay: -1.5s; }body .wrap .cube .face.building1:nth-of-type(3) { an imation-delay: -2.25s; }body .wrap .cube .face.building1:nth-of-type(4) { an imation-delay: -3s; }body .wrap .cube .face.building1:nth-of-type(5) { an imation-delay: -3.75s; }body .wrap .cube .face.building1:nth-of-type(6) { an imation-delay: -4.5s; }body .wrap .cube .face.building1:nth-of-type(7) { an imation-delay: -5.25s; }body .wrap .cube .face.building1:nth-of-type(8) { an imation-delay: -6s; }body .wrap .cube .face.building1:nth-of-type(9) { an imation-delay: -6.75s; }body .wrap .cube .face.building1:nth-of-type(10) { an imation-delay: -7.5s; }body .wrap .cube .face.building1:nth-of-type(11) { an imation-delay: -8.25s; }body .wrap .cube .face.building1:nth-of-type(12) { an imation-delay: -9s; }body .wrap .cube .face.building1:nth-of-type(13) { an imation-delay: -9.75s; }body .wrap .cube .face.building1:nth-of-type(14) { an imation-delay: -10.5s; }body .wrap .cube .face.building1:nth-of-type(15) { an imation-delay: -11.25s; }body .wrap .cube .face.building1:nth-of-type(16) { an imation-delay: -12s; }body .wrap .cube .face.building1:nth-of-type(17) { an imation-delay: -12.75s; }body .wrap .cube .face.building1:nth-of-type(18) { an imation-delay: -13.5s; }body .wrap .cube .face.building1:nth-of-type(19) { an imation-delay: -14.25s; }body .wrap .cube .face.building1:nth-of-type(20) { an imation-delay: -15s; }body .wrap .cube .face.building1:nth-of-type(21) { an imation-delay: -15.75s; }body .wrap .cube .face.building1:nth-of-type(22) { an imation-delay: -16.5s; }body .wrap .cube .face.building1:nth-of-type(23) { an imation-delay: -17.25s; }body .wrap .cube .face.building1:nth-of-type(24) { an imation-delay: -18s; }body .wrap .cube .face.building1:nth-of-type(25) { an imation-delay: -18.75s; }body .wrap .cube .face.building1:nth-of-type(26) { an imation-delay: -19.5s; }body .wrap .cube .face.building1:nth-of-type(27) { an imation-delay: -20.25s; }body .wrap .cube .face.building1:nth-of-type(28) { an imation-delay: -21s; }body .wrap .cube .face.building1:nth-of-type(29) { an imation-delay: -21.75s; }body .wrap .cube .face.building1:nth-of-type(30) { an imation-delay: -22.5s; }body .wrap .cube .face.building1:nth-of-type(31) { an imation-delay: -23.25s; }body .wrap .cube .face.building1:nth-of-type(32) { an imation-delay: -24s; }body .wrap .cube .face.building1:nth-of-type(33) { an imation-delay: -24.75s; }body .wrap .cube .face.building1:nth-of-type(34) { an imation-delay: -25.5s; }body .wrap .cube .face.building1:nth-of-type(35) { an imation-delay: -26.25s; }body .wrap .cube .face.building1:nth-of-type(36) { an imation-delay: -27s; }body .wrap .cube .face.building1:nth-of-type(37) { an imation-delay: -27.75s; }body .wrap .cube .face.building1:nth-of-type(38) { an imation-delay: -28.5s; }body .wrap .cube .face.building1:nth-of-type(39) { an imation-delay: -29.25s; }body .wrap .cube .face.building1:nth-of-type(40) { an imation-delay: -30s; }body .wrap .cube .face.building1:nth-of-type(3n) { height: 400px; }body .wrap .cube .face.building1:nth-of-type(4n) { height: 600px; margin-left: -700px; }body .wrap .cube .face.building1:nth-of-type(6n) { height: 1400px; }@keyframes lefttoright { 0% { transform: rotateY(-90deg) translateZ(25px) translateX(-1000%); background: #462e37;} 100% { transform: rotateY(-90deg) translateZ(25px) translateX(200%); background: #835768;}}body .wrap .cube .face.building1:before { content: ''; position: absolute; width: 300px; height: 100%; background: linear-gradient(to bottom, #fcb3a4, #8a5967); top: 0; left: 0; transform: rotateY(90deg) translateZ(-250px); transform-origin: 100% 50%; }body .wrap .cube .face.building1.right { margin-left: 800px; }body .wrap .cube .face.building1.right.outer { margin-left: 2000px; an imation-duration: 10s; }body .wrap .cube .face.building1.right:before { transform: rotateY(90deg) translateZ(-250px) translateX(100%); }body .wrap .cube .face.building1.right:nth-of-type(4n) { height: 600px; margin-left: 1000px; }body .wrap .cube .face.building1.right:nth-of-type(6n) { height: 1200px; }body .wrap .cube .face:nth-of-type(5) { transform: rotateX(90deg) translateZ(200px); }body .wrap .cube .face.road { height: 200%; top: -75%; background: repeating-linear-gradient(to bottom, transparent, transparent 5px, #2c2334 5px, #2c2334 15px), linear-gradient(to right, #2c2334, #2c2334 48%, #fcb3a4 48%, #fcb3a4 52%, #2c2334 52%); transform: rotateX(-90deg) translateZ(200px); an imation: animatedBackground 30s linear infinite; }@keyframes ani matedBackground { from { background-position: 0 1000px;}to { background-position: 0 -1000px; }}
代码整体结构。
查看效果。