css-loader实现三十余种loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css-loader实现三十余种loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/css-loader.css"> <style> .header__subtitle,.header__title { text-shadow: 1px 1px 0 rgba(0,0,0,.2) } *,:after,:before { margin: 0; padding: 0; list-style: none } body { font-family: 'Open Sans',sans-serif; font-weight: 400; background-color: #fff; color: #444; font-size: 16px } .footer,.header { background-color: #1abc9c; color: #fff; text-align: center } .container { padding-left: 10px; padding-right: 10px } .footer { padding: 20px; border-top: solid 15px #16a085; margin-top: 25px } .header { padding: 50px 20px; border-bottom: solid 15px #16a085; margin-bottom: 25px; position: relative } .header__title { font-weight: 700; font-size: 54px; letter-spacing: -2px } .header__title:after,.header__title:before { content: ''; width: 10px; height: 10px; display: inline-block; border: 5px solid #16a085; border-right-color: transparent; vertical-align: middle; border-radius: 50%; animation: rotation 1s infinite linear } .header__title:before { margin-right: 10px } .header__title:after { margin-left: 10px; animation-duration: 1.5s } .header__subtitle { font-weight: 300; font-size: 24px } @keyframes pulse { to { transform: scale(1.2) }} @keyframes rotation { to { transform: rotate(359deg) }} .heart { color: #e74c3c; display: inline-block; vertical-align: bottom; font-size: 22px; animation: pulse .5s linear infinite alternate } .heart--small { font-size: 16px; vertical-align: middle } .row { max-width: 850px; width: 100%; margin: 0 auto } .row--space { margin-bottom: 25px } .row--flex { display: flex; flex-flow: row wrap; justify-content: flex-start } .box__item,.button,.input { display: inline-block } .box { padding: 15px; background-color: #f5f5f5; border: 1px solid #dedede; margin: 10px 10px 10px 0 } .box--full { width: 100%; margin-right: 0 } .box__item { margin: 8px 0 } .box__title,.title,p { margin-bottom: 15px } .box__title { font-size: 18px; color: #666 } .button { border: none; background-color: #1abc9c; color: #fff; font-size: 14px; padding: 10px 20px; border-radius: 5px; text-shadow: 1px 1px 0 rgba(0,0,0,.25); box-shadow: 0 5px 0 0 #16a085; transition: background .3s ease } .button:focus,.button:hover { background-color: #049372; outline: 0 } .button:active { transform: translateY(5px); box-shadow: none } .input { padding: 8px; max-width: 90px; transition: all .3s ease; border: 1px solid #eee } .input:focus { border-color: #ccc } a { color: #16a085 } a:hover { text-decoration: none } .text-yellow { color: #f1c40f } .text-white { color: #fff } @media screen and (max-width:550px) { .header { padding: 25px 10px } .header__title { font-size: 32px; letter-spacing: 0; margin-bottom: 15px } .header__subtitle { font-size: 20px; line-height: 1.4 }} </style> </head> <body> <div id="loader"></div> <div class="htmleaf-container"> <div class="container"> <div class="row row--flex"> <div class="box box--full"> <h3 class="box__title">Default</h3> <div class="box__item"> <button id="loader-default" class="button">default</button> </div> <div class="box__item"> <button id="loader-default-half" class="button">half</button> </div> <div class="box__item"> <button id="loader-default-inverse" class="button">inverse</button> </div> <div class="box__item"> <button id="loader-default-text" class="button">w/ text</button> </div> <div class="box__item"> <button id="loader-default-blink" class="button">blink</button> </div> <div class="box__item"> <input type="text" id="custom-text" class="input" placeholder="custom text here"> <button id="loader-default-custom-text" class="button">custom text</button> </div> </div> <div class="box box--full"> <h3 class="box__title">Bar</h3> <div class="box__item"> <button id="loader-bar" class="button">default</button> </div> <div class="box__item"> <button id="loader-bar-rounded" class="button">rounded</button> </div> <div class="box__item"> <button id="loader-bar-text" class="button">w/ text</button> </div> <div class="box__item"> <button id="loader-bar-blink" class="button">blink</button> </div> <div class="box__item"> <input type="text" id="bar-custom-text" class="input" placeholder="custom text here"> <button id="loader-bar-custom-text" class="button">custom text</button> </div> </div> <div class="box"> <h3 class="box__title">Border</h3> <div class="box__item"> <button id="loader-border" class="button">default</button> </div> <div class="box__item"> <button id="loader-border-text" class="button">w/ text</button> </div> <div class="box__item"> <button id="loader-border-blink" class="button">blink</button> </div> <div class="box__item"> <input type="text" id="border-custom-text" class="input" plac.........完整代码请登录后点击上方下载按钮下载查看
网友评论0