three-dots实现十多种三个点loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:three-dots实现十多种三个点loading加载动画效果代码
代码标签: three-dots 三个点 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/three-dots.min.css"> </head> <body > <style> html, body { height: 100%; background: #f6f7fd; font-size: 16px; } .heading { margin: 36px 0; padding: 24px 32px; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(0, 32, 128, 0.12); border-radius: 16px; font-size: 18px; } .snippet { position: relative; background: #fff; padding: 32px 5%; margin: 24px 0; box-shadow: 0 4px 12px -2px rgba(0, 32, 128, .1), 0 0 0 1px rgba(60, 80, 120, 0.1); border-radius: 16px; } .snippet::before { display: inline-block; position: absolute; top: 6px; left: 6px; padding: 0 8px; content: attr(data-title); font-size: 12px; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: white; background-color: rgb(255, 25, 100); border-radius: 10px; line-height: 20px; } .snippet:hover { cursor: pointer; outline: 2px solid rgb(255, 25, 100); } .stage { display: flex; justify-content: center; align-items: center; position: relative; padding: 32px 0; margin: 0 -5%; overflow: hidden; } .filter-contrast { filter: contrast(5); background-color: white; } .footer { margin: 120px 0 20px; text-align: center; overflow: auto; } .tooltip::after { position: absolute; top: 100%; left: 50%; margin-top: 8px; padding: 6px 8px; border-radius: 4px; font-size: 12px; line-height: 1; color: white; background-color: rgba(97, 97, 97, .9); transform: translateX(-50%); content: attr(aria-label); pointer-events: none; } </style> <main> <div class="container"> <div class="row examples"> <div class="col-3"> <div class="snippet" data-title="dot-elastic"> <div class="stage"> <div class="dot-elastic"></div> </div> </div> </div> <div class="col-3"> <div class="snippet" data-title="dot-pulse"> <div class="stage"> <div class="dot-pulse"></div> </div> </div> </div> <div class="col-3"> <div class="snippet" data-title="dot-flashing"> <div class="stage"> <div class="dot-flashing"></div> </div> </div> </div> <div class="col-3"> <div class="snippet" data-title="dot-collision"> <div class="stage"> <div class="dot-collision"></div> </div> </div> </div> <div class="col-3"> <div class="snippet" data-title="dot-revolution"> <div class="stage"> <div class="dot-revolution"></div> </div> </div> </div> <div class="col-3"> <div class="snippet" data-title="dot-carousel"> <div class="stage"> <div class="dot-carousel"></div> </div> </div> </div> <div class="col-3"> <div class="snippet" data-title="dot-typing"> <div class="stage"> <div class="dot-typing"></div> </div> </div> </div> <div class="col-3"> <div class="snippet" data-title="dot-windmill"> <div class="stage"> <div class="dot-windmill"></div> </div> </div> </div> <div class="col-3"> <div class="snippet" data-title="dot-bricks"> <div class="stage"> <div class="dot.........完整代码请登录后点击上方下载按钮下载查看
网友评论0