纯css实现3d汽车360度旋转动画效果
代码语言:html
所属分类:三维
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSSYBERTRUCK</title> <style> *, *:before, *:after { box-sizing: border-box; position: relative; -webkit-animation-play-state: var(--play-state, paused) !important; animation-play-state: var(--play-state, paused) !important; } html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } :root { --color-top: #E7EEF6; --color-glass: rgba(0, 0, 0, 0.6); --c-top: #DAE0E4; --c-side: #778189; --c-bottom: #444246; --c-bumper: #111; --speed: 2s; --duration: 30s; } label[for="animation"] { position: absolute; height: 2rem; color: white; top: 0; left: calc(1.5rem + 20px); line-height: 2rem; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; } #animation { position: absolute; width: 20px; height: 2rem; top: 0; left: 1rem; } label[for="animation"], #animation { opacity: 0.3; transition: opacity .3s; cursor: pointer; } label[for="animation"]:hover, #animation:hover { opacity: 0.9; } #animation:checked ~ * { --play-state: 'running'; } #cybertruck { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: visible; backface-visibility: visible; --ry: 0deg; width: 340px; height: 930px; -webkit-transform: rotateX(80deg) rotateZ(calc(var(--rz, 0) * 1turn)); transform: rotateX(80deg) rotateZ(calc(var(--rz, 0) * 1turn)); -webkit-animation: cybertruck var(--duration) linear infinite; animation: cybertruck var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); -webkit-animation-timing-function: linear; animation-timing-function: linear; } @-webkit-keyframes cybertruck { from { -webkit-transform: rotateX(80deg) rotateZ(0turn); transform: rotateX(80deg) rotateZ(0turn); } to { -webkit-transform: rotateX(80deg) rotateZ(1turn); transform: rotateX(80deg) rotateZ(1turn); } } @keyframes cybertruck { from { -webkit-transform: rotateX(80deg) rotateZ(0turn); transform: rotateX(80deg) rotateZ(0turn); } to { -webkit-transform: rotateX(80deg) rotateZ(1turn); transform: rotateX(80deg) rotateZ(1turn); } } #cybertruck .highlight { border-left: 5px solid green; border-top: 5px solid red; } #cybertruck:before { content: ''; position: absolute; top: 10%; left: 50%; width: 0; height: 100%; -webkit-transform: translateZ(-195px) scale(3, 1.2); transform: translateZ(-195px) scale(3, 1.2); box-shadow: 0 0 150px 50px rgba(0, 0, 0, 0.5); } .side { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: visible; backface-visibility: visible; position: absolute; top: 0; width: 140px; height: 930px; left: 0; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: rotateY(var(--ry)) translateX(-100%) rotateZ(-2deg); transform: rotateY(var(--ry)) translateX(-100%) rotateZ(-2deg); } .side.-left { --ry: -90deg; } .side.-left:before { -webkit-animation: side-left var(--duration) linear infinite; animation: side-left var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes side-left { from, to { background: #8B898D; border-color: #4D5055; } 50% { background: #A0A5A9; border-color: #5D6369; } 75% { background: #676E76; border-color: #454244; } } @keyframes side-left { from, to { background: #8B898D; border-color: #4D5055; } 50% { background: #A0A5A9; border-color: #5D6369; } 75% { background: #676E76; border-color: #454244; } } .side.-right { --ry: -90deg; } .side.-right:before { -webkit-animation: side-right var(--duration) linear infinite; animation: side-right var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes side-right { from, to { background: #7C726F; border-color: #73645B; } 25% { background: #4B5665; border-color: #34373E; } 50%, 75% { background: #545A61; border-color: #454952; } } @keyframes side-right { from, to { background: #7C726F; border-color: #73645B; } 25% { background: #4B5665; border-color: #34373E; } 50%, 75% { background: #545A61; border-color: #454952; } } .side:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--c-side); border-left: 50px solid; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 905px, 40px 820px, 90px 785px, 90px 695px, 30px 645px, 0px 635px, 0px 210px, 30px 200px, 115px 155px, 115px 45px, 50px 21px, 100% 0, 0px 0%); clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 905px, 40px 820px, 90px 785px, 90px 695px, 30px 645px, 0px 635px, 0px 210px, 30px 200px, 115px 155px, 115px 45px, 50px 21px, 100% 0, 0px 0%); } .side.-right { left: 100%; } .side.-right > .bumper { -webkit-transform: translateZ(-5px); transform: translateZ(-5px); } .side > .bumper { position: absolute; left: 0; bottom: 280px; height: 450px; width: 25px; background-color: var(--c-bumper); -webkit-transform: translateZ(5px); transform: translateZ(5px); -webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px)); clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px)); } .side.-left .bumper { -webkit-animation: side-left-bumper var(--duration) linear infinite; animation: side-left-bumper var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes side-left-bumper { from, to, 50% { background: #3F4245; } 75%, 80% { background: #000; } 90% { background: #2C2C2D; } } @keyframes side-left-bumper { from, to, 50% { background: #3F4245; } 75%, 80% { background: #000; } 90% { background: #2C2C2D; } } .side.-right .bumper { -webkit-animation: side-right-bumper var(--duration) linear infinite; animation: side-right-bumper var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes side-right-bumper { from, to { background: #3F3129; } 25% { background: #000; } 50% { background: #34343C; } } @keyframes side-right-bumper { from, to { background: #3F3129; } 25% { background: #000; } 50% { background: #34343C; } } .well { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: visible; backface-visibility: visible; height: 100px; position: absolute; width: 20px; --ry: 30deg; } .well.-front { left: 105px; top: 50px; } .well.-back { left: 80px; top: 685px; } .well:before, .well:after, .well .well-plate { background-color: var(--c-bumper); } .well:before, .well:after { content: ''; position: absolute; left: 0; width: 100%; height: 100%; } .well:before { bottom: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right; -webkit-clip-path: polygon(0 calc(100% - 10px), 0 0, 100% 0%, 100% 100%); clip-path: polygon(0 calc(100% - 10px), 0 0, 100% 0%, 100% 100%); } .well:after { top: 100%; -webkit-transform-origin: top right; transform-origin: top right; -webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 100%); } .well > .well-plate { -webkit-transform-origin: right center; transform-origin: right center; -webkit-transform: rotateY(var(--ry)); transform: rotateY(var(--ry)); -webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px)); clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px)); } .well.-front:before { -webkit-transform: rotateZ(-60deg) rotateY(var(--ry)); transform: rotateZ(-60deg) rotateY(var(--ry)); -webkit-clip-path: polygon(0 calc(100% - 10px), 0 40px, 100% 0%, 100% 100%); clip-path: polygon(0 calc(100% - 10px), 0 40px, 100% 0%, 100% 100%); } .well.-front:after { height: 140px; -webkit-transform: rotateZ(60deg) rotateY(var(--ry)); transform: rotateZ(60deg) rotateY(var(--ry)); -webkit-clip-path: polygon(0 10px, 100% 0px, 100% 100%, 10px 100%, 0 calc(100% - 40px)); clip-path: polygon(0 10px, 100% 0px, 100% 100%, 10px 100%, 0 calc(100% - 40px)); } .well.-back:before { height: 110px; -webkit-transform: rotateZ(-60deg) rotateY(var(--ry)); transform: rotateZ(-60deg) rotateY(var(--ry)); -webkit-clip-path: polygon(0 calc(100% - 10px), 0 45px, 100% 0%, 100% 100%); clip-path: polygon(0 calc(100% - 10px), 0 45px, 100% 0%, 100% 100%); } .well.-back:after { height: 100px; -webkit-transform: rotateZ(60deg) rotateY(var(--ry)); transform: rotateZ(60deg) rotateY(var(--ry)); -webkit-clip-path: polygon(100% 100%, 0% calc(100% - 45px), 0% 10px, 100% 0%); clip-path: polygon(100% 100%, 0% calc(100% - 45px), 0% 10px, 100% 0%); } .side.-right .well { --ry: -30deg; } .side.-left .well:after { -webkit-animation: left-well-back-after var(--duration) linear infinite; animation: left-well-back-after var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes left-well-back-after { from, to { background: #373438; } 25%, 90% { background: #000; } } @keyframes left-well-back-after { from, to { background: #373438; } 25%, 90% { background: #000; } } .side.-left .well .well-plate { -webkit-animation: left-well-plate var(--duration) linear infinite; animation: left-well-plate var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes left-well-plate { from, to, 25% { background: #717476; } 50% { background: #6D7174; } 75% { background: #000; } } @keyframes left-well-plate { from, to, 25% { background: #717476; } 50% { background: #6D7174; } 75% { background: #000; } } .side.-left .well:before { -webkit-animation: left-well-back-before var(--duration) linear infinite; animation: left-well-back-before var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes left-well-back-before { from, to { background: #000; } 50% { background: #747C7D; } 55% { background: #909798; } 75% { background: #000; } } @keyframes left-well-back-before { from, to { background: #000; } 50% { background: #747C7D; } 55% { background: #909798; } 75% { background: #000; } } .side.-right .well:after { -webkit-animation: right-well-back-after var(--duration) linear infinite; animation: right-well-back-after var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes right-well-back-after { from, to, 25% { background: #000; } 30% { background: #3A3F41; } } @keyframes right-well-back-after { from, to, 25% { background: #000; } 30% { background: #3A3F41; } } .side.-right .well .well-plate { -webkit-animation: right-well-plate var(--duration) linear infinite; animation: right-well-plate var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes right-well-plate { from, to { background: #616263; } 25% { background: #000; } 50% { background: #42474B; } } @keyframes right-well-plate { from, to { background: #616263; } 25% { background: #000; } 50% { background: #42474B; } } .side.-right .well:before { -webkit-animation: right-well-back-before var(--duration) linear infinite; animation: right-well-back-before var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes right-well-back-before { from, to { background: #000; } 20% { background: #202225; } 30% { background: #000; } 50% { background: #14161A; } } @keyframes right-well-back-before { from, to { background: #000; } 20% { background: #202225; } 30% { background: #000; } 50% { background: #14161A; } } .well-plate { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .top-side { position: absolute; top: 0; right: 0; height: 100%; width: 105px; -webkit-transform-origin: right; transform-origin: right; -webkit-transform: rotateY(160deg); transform: rotateY(160deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .top-side:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-clip-path: polygon(100% 100%, 100% 0%, 0% 410px, 10px 410px, 85px 110px, 85px 590px, 45px 585px, 10px 410px, 0 410px); clip-path: polygon(100% 100%, 100% 0%, 0% 410px, 10px 410px, 85px 110px, 85px 590px, 45px 585px, 10px 410px, 0 410px); z-index: 2; } .side.-left > .top-side { -webkit-transform: rotateY(-160deg); transform: rotateY(-160deg); } .side.-left > .top-side:before { -webkit-animation: top-side-left var(--duration) linear infinite; animation: top-side-left var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes top-side-left { from, to, 25% { background: #9A9DA2; } 50% { background: #9DA3A8; } 75% { background: white; } } @keyframes top-side-left { from, to, 25% { background: #9A9DA2; } 50% { background: #9DA3A8; } 75% { background: white; } } .side.-right > .top-side:before { -webkit-animation: top-side-right var(--duration) linear infinite; animation: top-side-right var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes top-side-right { from, to { background: #878688; } 25% { background: #737D86; } 50%, 75% { background: #676D74; } } @keyframes top-side-right { from, to { background: #878688; } 25% { background: #737D86; } 50%, 75% { background: #676D74; } } .ball-bearing, .windows { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ball-bearing { z-index: 2; opacity: 0; } .windows { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-transform-origin: left; transform-origin: left; -webkit-clip-path: polygon(85px 100px, 10px 410px, 45px 585px, 85px 590px); clip-path: polygon(85px 100px, 10px 410px, 45px 585px, 85px 590px); -webkit-transform: rotateY(5deg); transform: rotateY(5deg); background: rgba(0, 0, 0, 0.5); } .side.-left .windows { -webkit-transform: rotateY(-5deg); transform: rotateY(-5deg); } .window { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .window:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .window.-driver { position: absolute; top: 220px; left: 0; width: 100%; height: 200px; background: linear-gradient(to bottom, #000, #000 20px, transparent 20px, transparent calc(100% - 20px), #000 calc(100% - 20px), #000); } .window.-passenger { position: absolute; top: 420px; left: 0; width: 100%; height: 170px; background: linear-gradient(to bottom, transparent, transparent 20px, transparent calc(100% - 20px), #000 calc(100% - 20px), #000); } .door { position: absolute; height: 200px; width: 100%; border-top: 2px solid rgba(0, 0, 0, 0.1); border-bottom: 2px solid rgba(0, 0, 0, 0.1); } .door.-front { top: 215px; left: 0; border-bottom: none; } .door.-back { top: 415px; left: 0; height: 185px; -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: skewY(5deg); transform: skewY(5deg); } .front { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: visible; backface-visibility: visible; position: absolute; top: -35px; left: 0; width: 100%; height: 455px; -webkit-transform-origin: left 35px; transform-origin: left 35px; -webkit-transform: rotateX(16deg); transform: rotateX(16deg); } .front > .frunk, .front > .windshield { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-clip-path: polygon(10% 100%, 0 35px, 40px 0, calc(100% - 40px) 0, 100% 35px, 90% 100%); clip-path: polygon(10% 100%, 0 35px, 40px 0, calc(100% - 40px) 0, 100% 35px, 90% 100%); } .windshield:before { border: 20px solid #111; border-width: 25px 40px 20px; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 325px; background: rgba(0, 0, 0, 0.5); } .windshield > .light { position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; background: linear-gradient(to top, #000, #000 40%, transparent); } .windshield > .light:before { content: ''; position: absolute; bottom: 10px; left: 15%; width: 70%; height: 10px; background: #fff; border-radius: 10px; box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.2); } .frunk:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 135px; -webkit-animation: frunk var(--duration) linear infinite; animation: frunk var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes frunk { from, to { background: #ABB1B4; } 25% { background: #ABB1B4; } 40% { background: #BCC4C8; } 50% { background: #656C72; } 75% { background: #9EA4A7; } } @keyframes frunk { from, to { background: #ABB1B4; } 25% { background: #ABB1B4; } 40% { background: #BCC4C8; } 50% { background: #656C72; } 75% { background: #9EA4A7; } } .back { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: visible; backface-visibility: visible; height: 580px; width: 100%; top: 100%; position: absolute; -webkit-transform-origin: top center; transform-origin: top center; -webkit-transform: rotateX(-27deg); transform: rotateX(-27deg); } .back:before { background: rgba(0, 0, 0, 0.8); border: 20px solid black; border-width: 20px 40px; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 185px; -webkit-clip-path: polygon(35px 0, calc(100% - 35px) 0, calc(100% - 20px) 100%, 20px 100%); clip-path: polygon(35px 0, calc(100% - 35px) 0, calc(100% - 20px) 100%, 20px 100%); } .trunk { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: visible; backface-visibility: visible; position: absolute; top: 185px; height: 180px; width: calc(100% - 44px); left: 22px; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: rotateX(-80deg); transform: rotateX(-80deg); } .trunk:before, .trunk:after { -webkit-animation: trunk var(--duration) linear infinite; animation: trunk var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes trunk { from, to { color: #51545F; } 25%, 50% { color: #434950; } 75% { color: #23252E; } } @keyframes trunk { from, to { color: #51545F; } 25%, 50% { color: #434950; } 75% { color: #23252E; } } .trunk:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 80px; background: rgba(0, 0, 0, 0.5); border: 20px solid currentColor; } .trunk:after { content: ''; position: absolute; top: 75px; left: 0; width: 100%; height: 40px; background: currentColor; border-top: 5px solid rgba(0, 0, 0, 0.5); -webkit-transform-origin: top; transform-origin: top; -webkit-transform: rotateX(5deg); transform: rotateX(5deg); } .trunk-side { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: visible; backface-visibility: visible; position: absolute; top: 0; width: 320px; height: 160px; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: skewY(7deg); transform: skewY(7deg); } .trunk-side:before { content: ''; background-color: var(--c-top); position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform-origin: top left; transform-origin: top left; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%); } .trunk-side:after { content: ''; position: absolute; left: 0; width: 100%; height: 25px; background-color: #fff; bottom: 100%; -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-clip-path: polygon(0 calc(100% - 2px), 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 calc(100% - 2px), 100% 0, 100% 100%, 0 100%); -webkit-animation: trunk-side-top var(--duration) linear infinite; animation: trunk-side-top var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes trunk-side-top { from, to { background: #4E4B4C; } 25% { background: #969D9E; } 50% { background: #575B5E; } 75% { background: #3E4243; } } @keyframes trunk-side-top { from, to { background: #4E4B4C; } 25% { background: #969D9E; } 50% { background: #575B5E; } 75% { background: #3E4243; } } .trunk-side.-left { left: 0; -webkit-transform: rotateY(-90deg) skewY(7deg); transform: rotateY(-90deg) skewY(7deg); } .trunk-side.-left:after { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); } .trunk-side.-left:before { -webkit-animation: trunk-side-left-before var(--duration) linear infinite; animation: trunk-side-left-before var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes trunk-side-left-before { from, to { background: #3C2E2F; } 25% { background: #3D4A5A; } 50%, 75% { background: #292C33; } } @keyframes trunk-side-left-before { from, to { background: #3C2E2F; } 25% { background: #3D4A5A; } 50%, 75% { background: #292C33; } } .trunk-side.-right { left: 100%; -webkit-transform: rotateY(-90deg) skewY(7deg); transform: rotateY(-90deg) skewY(7deg); } .trunk-side.-right:after { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } .trunk-side.-right:before { -webkit-animation: trunk-side-right-before var(--duration) linear infinite; animation: trunk-side-right-before var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes trunk-side-right-before { from, to, 25% { background: #4C4D53; } 50% { background: #53595F; } 75% { background: #555962; } } @keyframes trunk-side-right-before { from, to, 25% { background: #4C4D53; } 50% { background: #53595F; } 75% { background: #555962; } } .bed { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: visible; backface-visibility: visible; position: absolute; top: 140px; left: 0; width: 100%; height: 320px; background: #ddd; -webkit-transform-origin: top center; transform-origin: top center; -webkit-transform: rotateX(91deg); transform: rotateX(91deg); } .bed:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: translateZ(35px); transform: translateZ(35px); -webkit-animation: bed var(--duration) linear infinite; animation: bed var(--duration) linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); animation-delay: calc(-1 * var(--duration) * var(--rz, 0)); } @-webkit-keyframes bed { from, to { background: #6E6C71; } 25% { background: #C5CED1; } 50% { background: #4E575E; } 75% { background: #555D65; } } @keyframes bed { from, to { background: #6E6C71; } 25% { background: #C5CED1; } 50% { background: #4E575E; } 75% { background: #555D65; } } .tailgate { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: visible; backface-visibility: visible; position: absolute; bo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0