css实现九款loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现九款loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, textarea, input { margin: 0; padding: 0; border: 0; vertical-align: baseline; box-sizing: border-box; font-family: 'Proxima Nova'; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } input { font-family: 'Proxima Nova'; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; font-size: 16px; color: #333; /* 取消点击时背景色 */ -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-focus: none; -moz-user-select: none; } /* custom css */ div:active,section:active { -webkit-tap-highlight-color: transparent; -o-tap-highlight-color: transparent; -moz-tap-highlight-color: transparent; } .clearfix { zoom: 1; } .clearfix:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; } body { background-color: #abcdef; } .demoBox { width: 100%; padding: 50px 0; } .demoBox .title { text-align: center; font-size: 50px; margin-bottom: 30px; } .demoBox .demoList { max-width: 600px; margin: 0 auto; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; } .demoBox .demoList .demoItem { width: calc(33.3% - 10px); height: 170px; margin: 5px 0; border: 1px solid rgba(255, 255, 255, 0.5); display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.3); } .demoBox .demoList .demoItem .container { width: 30px; height: 30px; position: relative; } /* google loadings */ #google .demoItem { background-color: rgba(0, 0, 0, 0.9); } #google .demoItem .container .shape-1 { background-color: #1875E5; } #google .demoItem .container .shape-2 { background-color: #C5523F; } #google .demoItem .container .shape-3 { background-color: #499255; } #google .demoItem .container .shape-4 { background-color: #F2B736; } @-webkit-keyframes Animation1Shape1 { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(16px, 16px); transform: translate(16px, 16px); } } @keyframes Animation1Shape1 { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(16px, 16px); transform: translate(16px, 16px); } } @-webkit-keyframes Animation1Shape2 { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(-16px, 16px); transform: translate(-16px, 16px); } } @keyframes Animation1Shape2 { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(-16px, 16px); transform: translate(-16px, 16px); } } @-webkit-keyframes Animation1Shape3 { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(16px, -16px); transform: translate(16px, -16px); } } @keyframes Animation1Shape3 { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(16px, -16px); transform: translate(16px, -16px); } } @keyframes Animation1Shape4 { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(-16px, -16px); transform: translate(-16px, -16px); } } @-webkit-keyframes Animation1Shape4 { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(-16px, -16px); transform: translate(-16px, -16px); } } .google-animation-1 { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .google-animation-1 .shape { width: 10px; height: 10px; position: absolute; } .google-animation-1 .shape-1 { left: 0; -webkit-animation: Animation1Shape1 0.5s ease infinite alternate; animation: Animation1Shape1 0.5s ease infinite alternate; } .google-animation-1 .shape-2 { right: 0; -webkit-animation: Animation1Shape2 0.5s ease infinite alternate; animation: Animation1Shape2 0.5s ease infinite alternate; } .google-animation-1 .shape-3 { bottom: 0; -webkit-animation: Animation1Shape3 0.5s ease infinite alternate; animation: Animation1Shape3 0.5s ease infinite alternate; } .google-animation-1 .shape-4 { right: 0; bottom: 0; -webkit-animation: Animation1Shape4 0.5s ease infinite alternate; animation: Animation1Shape4 0.5s ease infinite alternate; } @-webkit-keyframes Animation2Shape1 { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(20px, 20px); transform: translate(20px, 20px); } } @keyframes Animation2Shape1 { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(20px, 20px); transform: translate(20px, 20px); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0