three打造一个三维火箭旋转升空动画效果代码
代码语言:html
所属分类:三维
代码描述:three打造一个三维火箭旋转升空动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { margin: 0; height: 100%; background: #1a032b; overflow: hidden; perspective: 10rem; } #canvas { position: absolute; width: 100%; height: 100%; overflow: hidden; } .fire-wrapper { left: 50%; position: absolute; top: 50%; transform-origin: top center; transform: translate(-50%, 0) rotate3d(1, 0, 0, 60deg); width: 3.5rem; } .fire { animation: whoosh 1s linear infinite both; width: 100%; } @keyframes whoosh { from { transform: translateY(-25%); } to { transform: translateY(0); } } .rain { position: absolute; width: 1rem; height: 10rem; background: #ffffff; border-radius: 20%; opacity: 0.2; z-index: -1; } .drop { width: 1rem; height: 7rem; background: #ffffff; position: absolute; border-radius: 20%; opacity: 0.2; } .rain1 { left: 5rem; top: 2rem; animation: raining 2s linear infinite both; } .rain2 { left: 15rem; top: 10rem; animation: raining 3s linear infinite both; } .drop2 { top: 12rem; animation: raining 4s linear infinite both -2s; } .rain3 { left: 5rem; top: 35rem; animation: raining 3s linear infinite both; } .rain4 { right: 23rem; top: 6rem; animation: raining 4s linear infinite both; } .rain5 { left: 25rem; top: 47rem; animation: raining 3s linear infinite both -3s; } .drop5 { top: -6rem; animation: raining 2s linear infinite both; } .rain6 { right: 10rem; top: 34rem; animation: raining 3s linear infinite both; } .rain7 { left: 34rem; top: 10rem; animation: raining 2s linear infinite both -5s; } .rain8 { right: 25rem; top: 40rem; animation: raining 3s linear infinite both; } .drop8 { top: -7rem; animation: raining 4s linear infinite both -6s; } .rain9 { right: 5rem; top: 15.5rem; animation: raining 3s linear infinite both; } .rain10 { left: 24rem; top: -4rem; animation: raining 2s linear infinite both -3s; } .drop11 { right: 17rem; top: 20rem; animation: raining 3s linear infinite both; } .drop12 { right: 15rem; top: 50rem; animation: raining 4s linear infinite both -1s; } @keyframes raining { from { transform: translateY(-1200px); } to { transform: translateY(869px); } } </style> </head> <body > <div class="fire-wrapper"> <img class="fire" src="//repo.bfw.wiki/bfwrepo/svg/fire.svg" /> </div> <div class="rain rain1"></div> <div class="rain rain2"> <div class="drop drop2"></div> </div> <div class="rain rain3"></div> <div class="rain rain4"></div> <div class="rain rain5"> <div class="drop drop5"></div> </div&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0