<!DOCTYPE html>
<html lang="en" class="no-js">
<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">
<title>13款页面加载样式特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<!-- Divisions for loading effects -->
<div class="la-anim-1"></div>
<div class="la-anim-2"></div>
<div class="la-anim-3"></div>
<div class="la-anim-4"></div>
<div class="la-anim-5"></div>
<div class="la-anim-6">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" viewbox="0 0 500 500">
<path id="la-anim-6-border" transform="translate(250, 250)"/>
<path id="la-anim-6-loader" transform="translate(250, 250) scale(0.9)"/>
</svg>
</div>
<div class="la-anim-7"></div>
<div class="la-anim-8"><div></div><div></div></div>
<div class="la-anim-9"><div></div><div></div><div></div><div></div></div>
<div class="la-anim-10"></div>
<div class="la-anim-11"></div>
<div class="la-anim-13"></div>
<!-- main container -->
<div class="container">
<header>
<h1 class="la-anim-12" data-content="Creative Loading Effects">页面加载创意样式特效</h1>
</header>
<div class="main">
<div id="la-buttons" class="column">
<button data-anim="la-anim-1">YouTube</button>
<button data-anim="la-anim-2">Fill from left</button>
<button data-anim="la-anim-3">Fill from down</button>
<button data-anim="la-anim-4">Expanding box</button>
<button data-anim="la-anim-5">3D Bar Bottom</button>
<button data-anim="la-anim-6">Pie Timer</button>
<button data-anim="la-anim-7">Centered Expanding Line</button>
<button data-anim="la-anim-8">Fill Sides</button>
<button data-anim="la-anim-9">Surrounding Borders</button>
<button data-anim="la-anim-10">Corner indicator</button>
<button data-anim="la-anim-11">Big Counter</button>
<button data-anim="la-anim-12">Filling Title</button>
<button data-anim="la-anim-13">Flat Top Bar</button>
</div>
<div class="column">
<p>Loading animations don't have to be restricted to a tiny indicator.</p>
<p>Here is some inspiration for some creative loading effects.*</p>
<p class="small">*Note that not all browsers support animated pseudo-elements (last four effects).</p>
</div>
<div class="info">
<p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</div><!-- /main -->
</div><!-- /container -->
<script src="js/classie.js"></script>
<script>
var loader = document.getElementById('la-anim-6-loader')
, border = document.getElementById('la-anim-6-border')
, α = 0
, π = Math.PI
, t = 15
, tdraw;
function PieDraw() {
α++;
α %= 360;
var r = ( α * π / 180 )
, x = Math.sin( r ) * 250
, y = Math.cos( r ) * - 250
, mid = ( α > 180 ) ? 1 : 0
, anim = 'M 0 0 v -250 A 250 250 1 '
+ mid + ' 1 '
+ x + ' '
+ y + ' z';
loader.setAttribute( 'd', anim );
border.setAttribute( 'd', anim );
if( α != 0 )
tdraw = setTimeout(PieDraw, t); // Redraw
}
function PieReset() {
clearTimeout(tdraw);
var anim = 'M 0 0 v -250 A 250 250 1 0 1 0 -250 z';
loader.setAttribute( 'd', anim );
border.setAttribute( 'd', anim );
}
var inProgress = false;
Array.prototype.slice.call( document.querySelectorAll( '#la-buttons > button' ) ).forEach( function( el, i ) {
var anim = el.getAttribute( 'data-anim' ),
animEl = document.querySelector( '.' + anim );
el.addEventListener( 'click', function() {
if( inProgress ) return false;
inProgress = true;
classie.add( animEl, 'la-animate' );
if( anim === 'la-anim-6' ) {
PieDraw();
}
setTimeout( function() {
classie.remove( animEl, 'la-animate' );
if( anim === 'la-anim-6' ) {
PieReset();
}
inProgress = false;
}, 6000 );
} );
} );
</script>
</body>
</html>
13款页面加载样式特效.zip
版权申诉
161 浏览量
2022-11-16
21:20:59
上传
评论
收藏 46KB ZIP 举报
13款页面加载样式特效.zip （11个子文件） 
13款页面加载样式特效 jiaoben1457 css 
demo.css 3KB normalize.css 2KB component.css 10KB fonts codropsicons codropsicons.woff 2KB
codropsicons.svg 4KB codropsicons.ttf 2KB codropsicons.eot 2KB
index.html 4KB js modernizr.custom.js 7KB classie.js 2KB
13款页面加载样式特效.jpg 35KB资源评论
