css实现酷炫加载进度条loading动画效果代码
代码语言:html
所属分类:进度条
代码描述:css实现酷炫加载进度条loading动画效果代码
代码标签: css 酷炫 加载 进度条 loading 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #222; font-family: "Arial", sans-serif; } .progress-bar-container { width: 80%; position: relative; display: flex; justify-content: center; align-items: center; padding: 20px; background-color: #111; border-radius: 35px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 255, 0, 0.4); overflow: hidden; } .progress-bar { width: 100%; height: 60px; border-radius: 30px; overflow: hidden; position: relative; box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 255, 0, 0.4); } .filler { background: linear-gradient(45deg, #003300, #00cc00, #003300); height: 100%; border-radius: 30px; transition: width 2s ease-in-out; box-shadow: 0 4px 10px rgba(0, 255, 0, 0.5), 0 0 20px rgba(0, 255, 0, 0.4); position: relative; overflow: hidden; } .filler::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(0, 255, 0, 0.2) 25%, transparent 25%, transparent 50%, rgba(0, 255, 0, 0.2) 50%, rgba(0, 255, 0, 0.2) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; animation: stripes 1s linear infinite; } .overlay::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2) 50%, transparent 100%), url("//repo.bfw.wiki/bfwrepo/images/black-thread-light.png"); background-blend-mode: multiply; opacity: 0.5; pointer-events: none; z-index: 1; } .overlay::after { content: "";.........完整代码请登录后点击上方下载按钮下载查看
网友评论0