3dloading加载动画效果
代码语言:html
所属分类:加载滚动
代码描述:3dloading加载动画效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: rgb(26, 36, 48); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } .progress-bar { --progressbar-color: rgba(233, 233, 233, 0.3); --progress-color: rgba(104, 255, 149, 1); --progress: 20%; --box-side-height: 30px; position: relative; width: 300px; height: 50px; margin: 200px auto; perspective: 200px; } .progress-bar .box { position: relative; width: 300px; height: 50px; background: var(--progressbar-color); transform-style: preserve-3d; transform: rotateX(0); transition: transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); transform: rotateX(45deg); } .progress-bar.done .box { transform: rotateX(0); } .progress-bar .box-front { position: absolute; background: var(--progressbar-color); width: 100%; height: var(--box-side-height); left: 0; bottom: 0; transform-origin: center bottom; transform: rotateX(90deg); transition: transform 1s; } .progress-bar .box p { position: absolute; top: 0; left: 0; color: rgba(0, 0, 0, 0.801); text-align: center; width: 100%; height: 100%; line-height: 100%; z-index: 99; font-weight: bold; transition: opacity 1s, visibility 1s; } .progress-bar.done .box p.loading-text { opacity: 0; visibility: hidden; } .progress-bar:not(.done) .box p.done-text { opacity: 0; visibility: hidden; } .progress-bar .box-bottom { position: absolute; backgr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0