糖环加载loading动画效果
代码语言:html
所属分类:加载滚动
代码描述:糖环加载loading动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Lobster&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --dotDur: 1s; font-size: calc(20px + 10 * (100vw - 320px) / (1280 - 320)); } body { background-color: #d4f4fb; background-image: linear-gradient(#81dcf6, #d4f4fb); background-repeat: no-repeat; display: flex; font: 1em/1.5 Lobster, sans-serif; height: 100vh; overflow: hidden; } main { margin: auto; } .preloader { animation: spinCCW var(--dotDur) linear infinite; margin-bottom: 1.5em; position: relative; width: 9em; height: 9em; } .preloader, .preloader:before, .preloader:after, .preloader__stripe { border-radius: 50%; } .preloader:before, .preloader:after, .preloader__stripe { position: absolute; } .preloader:before, .preloader:after { animation: spinCW var(--dotDur) linear infinite; content: ""; display: block; top: 0; left: 0; width: 100%; height: 100%; } .preloader:before { background: radial-gradient(25% 6% at 50% 7.5%, #fff 12.5%, rgba(255, 255, 255, 0) 50%), radial-gradient(25% 6% at 50% 92.5%, #fff 12.5%, rgba(255, 255, 255, 0) 50%), radial-gradient(100% 100% at center, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.3) 34%, rgba(0, 0, 0, 0) 38% 46%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 50%); z-index: 2; } .preloader:after { box-shadow: 0.5em 0.5em 0.25em 0 rgba(0, 0, 0, 0.25), 0.5em 0.5em 0.25em 1.5em rgba(0, 0, 0, 0.25) inset; } .preloader__stripe { box-shadow: 0.25em 0.5em 0 inset; color: #255ff4; top: 50%; left: 50%; width: 7.5em; height: 7.5em; transform: translate(-50%, -50%) translateX(-0.75em); z-index: 1; } .preloader__stripe:nth-of-type(2n + 1) { color: #ffffff; } .preloader__stripe:nth-of-type(2) { transform: translate(-50%, -50%) rotate(45deg) translateX(-0.75em); } .preloader__stripe:nth-of-type(3) { transform: translate(-50%, -50%) rotate(90deg) translateX(-0.75em); } .preloader__stripe:nth-of-type(4) { transform: translate(-50%, -50%) rotate(135deg) translateX(-0.75em); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0