js+css实现全屏背景图片模糊到清晰带数字进度条加载动画效果代码
代码语言:html
所属分类:进度条
代码描述:js+css实现全屏背景图片模糊到清晰带数字进度条加载动画效果代码
代码标签: js css 全屏 背景 图片 模糊 清晰 数字 进度条 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); :root { --white: oklch(100% 0 0); } * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 0; height: 100vh; height: 100svh; width: 100vw; } .bg { background: url('//repo.bfw.wiki/bfwrepo/image/6539a3db9fbc4.png') no-repeat center center/cover; position: absolute; top: -40px; left: -40px; height: calc(100vh + 80px); height: calc(100svh + 80px); width: calc(100vw + 80px); z-index: -1; filter: blur(0px); } .loading-text { font-size: 50px; color: var(--white); } @media screen and (max-width: 440px) { .bg { background: url('//repo.bfw.wiki/bfwrepo/image/6539a3db9fbc4.png') no-repeat center center/cover; } } @media screen and (min-width: 441px) and (max-width: 740px) { .bg {.........完整代码请登录后点击上方下载按钮下载查看
网友评论0