单个div+css实现折纸上的立方体动画效果代码
代码语言:html
所属分类:动画
代码描述:单个div+css实现折纸上的立方体动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="monetization" content="$ilp.uphold.com/2f28xFUMdj9Z" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background: #ddd; perspective: 240vmin; margin: 0; height: 100vh; overflow: hidden; } @keyframes rotate { 0% { transform: translate(-50%, -50%) scale(0.7) rotate3d(0,1,-1,71.5deg); } 50% { transform: translate(-50%, -50%) scale(0.7) rotate3d(0,1,-1,71.5deg); } 100% { transform: translate(-50%, -50%) scale(0.7) rotate3d(0,1,-1,431.5deg); } } @keyframes initialize { 0% { transform: translate(-50%, -50%) scale(1) rotate3d(0,1,-1,0); } 50% { transform: translate(-50%, -50%) scale(0.7) rotate3d(0,1,-1,0); } 100% { transform: translate(-50%, -50%) scale(0.7) rotate3d(0,1,-1,71.5deg); } } .cube { animation: initialize 4s 2s linear forwards, rotate 12s 8s linear infinite forwards; width: 96vmin; height: 88vmin; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1) rotate3d(0,1,-1,0); transform-style: preserve-3d; } .cube::before, .cube::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#000 0 0) 12vmin 12vmin / 32vmin 0.2v.........完整代码请登录后点击上方下载按钮下载查看
网友评论0