CSS3动态Loading加载特效.zip资源-CSDN文库

共4个文件

js：1个

html：1个

css：1个

版权申诉

javascript

jQuery

html5

92 浏览量 2022-11-16 21:21:32 上传评论收藏 18KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS3动态Loading加载特效.zip （4个子文件）

CSS3动态Loading加载特效

jiaoben2594

css

style.css 796B

index.html 3KB

prefixfree.min.js 12KB

CSS3动态Loading加载特效.jpg 18KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3动态Loading加载特效 - 网页模板</title> <style> 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 { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* 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; } table { border-collapse: collapse; border-spacing: 0; } </style> <style> body{ text-align:center; background:#fff; } #loading { width:200px; height:100px; margin: 50px auto; } #loading span { height:80px; width:15px; background:#f01b00; display:inline-block; animation:loader 1s infinite; } #loading p { color: #f01b00; font-size: 20px; font-family: Helvetica; text-transform: uppercase; margin-top: 5px; font-weight: 300; letter-spacing: .05em; text-align: center; } @keyframes loader{ 50% { height:30px; margin-top:50px; opacity:.5; } } #loading span:nth-child(1) {animation-delay:.1s;} #loading span:nth-child(2) {animation-delay:.2s;} #loading span:nth-child(3) {animation-delay:.3s;} #loading span:nth-child(4) {animation-delay:.4s;} #loading span:nth-child(5) {animation-delay:.5s;} #loading span:nth-child(6) {animation-delay:.6s;} </style> <script src="js/prefixfree.min.js"></script> </head> <body> <div id="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <p>Thinking</p> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉