css实现三维3d跳动的立方体动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现三维3d跳动的立方体动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* Functions on mobile devices but looks best at or bigger than dimensions 1035x665 */ *, *::before, *::after { box-sizing: border-box; transform-style: preserve-3d; font-family: sans-serif; } body { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 100vh; overflow: hidden; background: #222; margin: 0; animation: colors 12s linear infinite; } @keyframes colors { from { filter: hue-rotate(0deg) saturate(150%); } to { filter: hue-rotate(360deg) saturate(150%); } } .scene { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; width: auto; height: auto; background: gray; perspective: 9999px; } @keyframes display { 0% { transform: rotateX(45deg) rotateZ(45deg); } 100% { transform: rotateX(45deg) rotateZ(405deg); } } .plane-starter { background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; width: 600px; height: 600px; transform: rotateX(45deg) rotateZ(45deg); animation: display 25s linear infinite; } .plane-starter > figure { position: absolute; background-color: Cyan; background-image: linear-gradient(blue 3px, transparent 3px), linear-gradient(to right, blue 3px, rgba(0, 0, 0, 0.5) 3px); background-size: 75px 75px; width: 100%; height: 100%; display: block; transform-origin: 50% 50%; border: 40px solid mediumspringgreen; animation: slide 10s linear infinite; } @keyframes slide { 0% { background-position: -100%; } 100% { background-position: 102%; } } .plane-starter > figure::after, .plane-starter > figure::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: radial-gradient( circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100% ); opacity: 0.7; } .plane-drop-back-left { transform: rotateY(90deg) translateZ(-300px) translateX(300px); } .plane-drop-back-left-back { transform: rotateY(90deg) translateZ(-350px) translateX(300px); height: 117% !important; opacity: 0.6; background-image: unset !important; } .plane-drop-back-left-back-cover, .plane-drop-back-right-back-cover { transform: translateX(-325px); height: 116.5% !important; width: 8.5% !important; border: unset !important; background-image: unset !important; } .plane-drop-back-ri.........完整代码请登录后点击上方下载按钮下载查看
网友评论0