css实现三维3d立方体变形动画效果代码
代码语言:html
所属分类:三维
代码描述:css实现三维3d立方体变形动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html><head><style>html, body { width: 100%; height: 100%; margin: 0; padding: 0; } *, *:before, *:after { box-sizing: border-box; position: relative; -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0, 1) !important; animation-timing-function: cubic-bezier(0.5, 0, 0, 1) !important; } body { display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; perspective: 1000px; background: linear-gradient(to bottom right, #a4c5c7, #2D3F48); } body:hover > label, body:hover > input { opacity: 1; } label, #shadows { position: fixed; top: 2vmin; opacity: 0.5; } label { left: 6vmin; color: white; font-weight: bold; } #shadows { left: 2vmin; } #shadows:not(:checked) ~ .cubes { --shadow-filter: none; } .cubes { width: 10vmin; height: 10vmin; transform: rotateX(60deg) rotateZ(-45deg); -webkit-backface-visibility: visible; backface-visibility: visible; overflow: visible; transform-style: preserve-3d; perspective: 9000px; } .cube, .large-shadow { height: 10vmin; width: 10vmin; transform-style: preserve-3d; -webkit-backface-visibility: visible; backface-visibility: visible; transform-origin: center center -0.5vmin; position: absolute; top: 0; left: 0; } .cube > .cube-wrap, .large-shadow > .cube-wrap { -webkit-animation: cube 4s infinite both; animation: cube 4s infinite both; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; -webkit-backface-visibility: visible; backface-visibility: visible; transform-origin: center center -0.5vmin; will-change: transform; } @-webkit-keyframes cube { from, to, 20%, 60% { -webkit-animation-timing-function: step-start; animation-timing-function: step-start; transform: none; } 40% { transform: rotateY(-1turn); } } @keyframes cube { from, to, 20%, 60% { -webkit-animation-timing-function: step-start; animation-timing-function: step-start; transform: none; } 40% { transform: rotateY(-1turn); } } .cube[data-cube^="1"], .large-shadow[data-cube^="1"] { top: calc(-10vmin - 2px); --color-bg-top: #A0EBE8; --color-bg-bottom: #89E4E4; --color-fl-top: #4EAFBC; --color-fl-bottom: #43A5B2; } .cube[data-cube^="2"], .large-shadow[data-cube^="2"] { --color-bg-top: #89E4E4; --color-bg-bottom: #76DEE5; --color-fl-top: #43A5B2; --color-fl-bottom: #3D93A9; } .cube[data-cube^="3"], .large-shadow[data-cube^="3"] { top: calc(10vmin + 2px); --color-bg-top: #76DEE5; --color-bg-bottom: #63D3D4; --color-fl-top: #3D93A9; --color-fl-bottom: #3B8D9F; } .cube[data-cube^="11"], .cube[data-cube^="21"], .cube[data-cube^="31"], .large-shadow[data-cube^="11"], .large-shadow[data-cube^="21"], .large-shadow[data-cube^="31"] { left: calc(-10vmin - 2px); --color-fr-top: #2D505F; --color-fr-bottom: #2D4F63; } .cube[data-cube^="12"], .cube[data-cube^="22"], .cube[data-cube^="32"], .large-shadow[data-cube^="12"], .large-shadow[data-cube^="22"], .large-shadow[data-cube^="32"] { --color-fr-top: #2D4F63; --color-fr-bottom: #2A5262; } .cube[data-cube^="13"], .cube[data-cube^="23"], .cube[data-cube^="33"], .large-shadow[data-cube^="13"], .large-shadow[data-cube^="23"], .large-shadow[data-cube^="33"] { left: calc(10vmin + 2px); --color-fr-top: #2A5262; --color-fr-bottom: #2A5467; } .cube[data-cube$="2"], .large-shadow[data-cube$="2"] { transform: translateZ(calc(10vmin + 2px)); } .cube[data-cube$="3"], .large-shadow[data-cube$="3"] { transform: translateZ(calc(-10vmin - 2px)); } .large-shadows { transform: translateZ(-21vmin); } .large-shadow { background: black; height: 10vmin; width: 10vmin; transform-origin: top right; -webkit-animation: large-shadow 4s infinite both; animation: large-shadow 4s infinite both; filter: var(--shadow-filter, blur(3vmin)); opacity: 0.2; will-change: transform; } @-webkit-keyframes large-shadow { from, 80%, to { transform: scale(1.5, 3); } 20% { transform: scale(1.5, 2); } 40%, 60% { transform: scale(1.5, 5); } 50% { transform: scale(1, 5); } } @keyframes large-shadow { from, 80%, to { transform: scale(1.5, 3); } 20% { transform: scale(1.5, 2); } 40%, 60% { transform: scale(1.5, 5); } 50% { transform: scale(1, 5); } } [class^=cube-] { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: visible; backface-visibility: visible; top: 0; left: 0; } [class^=cube-], [class^=cube-]:before { will-change: transform; -webkit-animation: any 4s infinite both; animation: any 4s infinite both; } [class^=cube-]:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: inherit; } .cube-top { -webkit-animation-name: cube-top; animation-name: cube-top; overflow: hidden; } .cube-top:before, .cube-top:after { will-change: transform; } .cube-top:before { background-image: linear-gradient(to bottom, #CBFEFF, transparent), linear-gradient(to bottom, var(--color-bg-top), var(--color-bg-bottom)); background-size: 2px 100%, auto; background-repeat: no-repeat; } .cube-top:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #DFF4F0; -webkit-animation: cube-top-flash 4s infinite both; animation: cube-top-flash 4s infinite both; } @-webkit-keyframes cube-top-flash { from, 50%, 60%, to { opacity: 0; } 52% { opacity: 0.9; } } @keyframes cube-top-flash { from, 50%, 60%, to { opacity: 0; } 52% { opacity: 0.9; } } @-webkit-keyframes cube-top { 20% { transform: translateZ(calc(-10vmin + 2vmin)); } 40%, 60%, 80% { transform: none; } } @keyframes cube-top { 20% { transform: translateZ(calc(-10vmin + 2vmin)); } 40%, 60%, 80% { transform: none; } } .cube-front-left { transform-origin: left center; transform: rotateY(90deg); overflow: hidden; } .cube-front-left:before { background-image: linear-gradient(to bottom, var(--color-fl-top), var(--color-fl-bottom)), linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent 60%); background-size: auto auto 1px 100%; background-repeat: no-repeat; transform-origin: right; -webkit-animation-name: cube-front-left; animation-name: cube-front-left; will-change: transform; } @-webkit-keyframes cube-front-left { 20% { transform: scaleX(0.2); } 40%, 60% { transform: translateX(-8vmin) scaleX(0.2); } 80% { transform: none; } } @keyframes cube-front-left { 20% { transform: scaleX(0.2); } 40%, 60% { transform: translateX(-8vmin) scaleX(0.2); } 80% { transform: none; } } .cube-front-right { transform-origin: bottom center; transform: rotateX(90deg); } .cube-front-right:before { background-image: linear-gradient(to right, var(--color-fr-top), var(--color-fr-bottom)); transform-origin: top; -webkit-animation-name: cube-front-right; animation-name: cube-front-right; will-change: transform; } @-webkit-keyframes cube-front-right { 20% { transform: scaleY(0.2); } 40%, 60% { transform: translateY(8vmin) scaleY(0.2); } 80% { transform: none; } } @keyframes cube-front-right { 20% { transform: scaleY(0.2); } 40%, 60% { transform: translateY(8vmin) scaleY(0.2); } 80% { transform: none; } } .cube-bottom { transform: translateZ(-10vmin); background-image: linear-gradient(to bottom, var(--color-bg-top), var(--color-bg-bottom)); -webkit-animation-name: cube-bottom; animation-name: cube-bottom; } @-webkit-keyframes cube-bottom { from, 20%, 80%, to { transform: translateZ(calc(-10vmin + 1px)) scale(0.95); } 40%, 60% { transform: translateZ(-2vmin) scale(0.95); } } @keyframes cube-bottom { from, 20%, 80%, to { transform: translateZ(calc(-10vmin + 1px)) scale(0.95); } 40%, 60% { transform: translateZ(-2vmin) scale(0.95); } } .cube-bottom:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #DFF4F0; -webkit-animation: cube-bottom-flash 4s infinite both; animation: cube-bottom-flash 4s infinite both; will-change: transform; } @-webkit-keyframes cube-bottom-flash { from, 40%, 50%, to { opacit.........完整代码请登录后点击上方下载按钮下载查看
网友评论0