css实现三维盒子分解拆开组装动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现三维盒子分解拆开组装动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* reset & base */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { padding: 0; margin: 0; } html { font-size: 62.5%; } body { font-size: 1.4rem; min-height: 100vh; background-color: #1f2029; perspective: 500; overflow: hidden; } .cube { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; width: 10rem; height: 10rem; margin: auto; will-change: transform; transform-style: preserve-3d; -webkit-animation: 20s cube-rotate linear infinite; animation: 20s cube-rotate linear infinite; } .cube .cube__face { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; transform-style: preserve-3d; } .cube .cube__face.cube__face--front-side { background-color: #b4b6c6; transform: translateZ(5rem); -webkit-animation: 5s unfold-front linear infinite; animation: 5s unfold-front linear infinite; } .cube .cube__face.cube__face--back-side { background-color: #9799b0; transform: translateZ(-5rem); -webkit-animation: 5s unfold-back linear infinite; animation: 5s unfold-back linear infinite; } .cube .cube__face.cube__face--left-side { background-color: #7a7d9a; transform: translateX(-5rem) rotateY(90deg); -webkit-animation: 5s unfold-left linear infinite; animation: 5s unfold-left linear infinite; } .cube .cube__face.cube__face--right-side { background-color: #616480; transform: translateX(5rem) rotateY(90deg); -webkit-animation: 5s unfold-right linear infinite; animation: 5s unfold-right linear infinite; } .cube .cube__face.cube__face--top-side { background-color: #4b4d63; transform: translateY(-5rem) rotateX(90deg); -webkit-animation: 5s unfold-top linear infinite; animation: 5s unfold-top linear infinite; } .cube .cube__face.cube__face--bottom-side { background-color: #353746; transform: translateY(5rem) rotateX(90deg); -webkit-animation: 5s unfold-bottom linear infinite; animation: 5s unfold-bottom linear infinite; } @-webkit-keyframes unfold-top { 0%, 100% { transform: translateY(-5rem) rotateX(90deg); } 50% { transform: translateY(-15rem) rotateX(90deg); } } @keyframes unfold-top { 0%, 100% { transform: t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0