master

分支 (1)

管理

管理

master

Icon-hover
/
index.html

<!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">
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container">
			<header>
				<h1>图标hover效果 <span>简单的圆形图标鼠标hover效果</span></h1>
				<nav id="codrops-demos" class="codrops-demos">
					<a href="#set-1">1</a>
					<a href="#set-2">2</a>
					<a href="#set-3">3</a>
					<a href="#set-4">4</a>
					<a href="#set-5">5</a>
					<a href="#set-6">6</a>
					<a href="#set-7">7</a>
					<a href="#set-8">8</a>
					<a href="#set-9">9</a>
				</nav>
			</header>
			<section id="set-1">
				<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
					<a href="#set-1" class="hi-icon hi-icon-mobile">Mobile</a>
					<a href="#set-1" class="hi-icon hi-icon-screen">Desktop</a>
					<a href="#set-1" class="hi-icon hi-icon-earth">Partners</a>
					<a href="#set-1" class="hi-icon hi-icon-support">Support</a>
					<a href="#set-1" class="hi-icon hi-icon-locked">Security</a>
				</div>
				<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
					<a href="#set-1" class="hi-icon hi-icon-mobile">Mobile</a>
					<a href="#set-1" class="hi-icon hi-icon-screen">Desktop</a>
					<a href="#set-1" class="hi-icon hi-icon-earth">Partners</a>
					<a href="#set-1" class="hi-icon hi-icon-support">Support</a>
					<a href="#set-1" class="hi-icon hi-icon-locked">Security</a>
				</div>
			</section>
			<section id="set-2">
				<div class="hi-icon-wrap hi-icon-effect-2 hi-icon-effect-2a">
					<a href="#set-2" class="hi-icon hi-icon-cog">Settings</a>
					<a href="#set-2" class="hi-icon hi-icon-clock">Time</a>
					<a href="#set-2" class="hi-icon hi-icon-videos">Videos</a>
					<a href="#set-2" class="hi-icon hi-icon-list">List</a>
					<a href="#set-2" class="hi-icon hi-icon-refresh">Refresh</a>
				</div>
				<div class="hi-icon-wrap hi-icon-effect-2 hi-icon-effect-2b">
					<a href="#set-2" class="hi-icon hi-icon-cog">Settings</a>
					<a href="#set-2" class="hi-icon hi-icon-clock">Time</a>
					<a href="#set-2" class="hi-icon hi-icon-videos">Videos</a>
					<a href="#set-2" class="hi-icon hi-icon-list">List</a>
					<a href="#set-2" class="hi-icon hi-icon-refresh">Refresh</a>
				</div>
			</section>
			<section id="set-3">
				<div class="hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3a">
					<a href="#set-3" class="hi-icon hi-icon-images">Images</a>
					<a href="#set-3" class="hi-icon hi-icon-pencil">Edit</a>
					<a href="#set-3" class="hi-icon hi-icon-link">Link</a>
					<a href="#set-3" class="hi-icon hi-icon-mail">Mail</a>
					<a href="#set-3" class="hi-icon hi-icon-location">Location</a>
				</div>
				<div class="hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3b">
					<a href="#set-3" class="hi-icon hi-icon-images">Images</a>
					<a href="#set-3" class="hi-icon hi-icon-pencil">Edit</a>
					<a href="#set-3" class="hi-icon hi-icon-link">Link</a>
					<a href="#set-3" class="hi-icon hi-icon-mail">Mail</a>
					<a href="#set-3" class="hi-icon hi-icon-location">Location</a>
				</div>
			</section>
			<section id="set-4">
				<div class="hi-icon-wrap hi-icon-effect-4 hi-icon-effect-4a">
					<a href="#set-4" class="hi-icon hi-icon-archive">Archive</a>
					<a href="#set-4" class="hi-icon hi-icon-chat">Chat</a>
					<a href="#set-4" class="hi-icon hi-icon-bookmark">Bookmarks</a>
					<a href="#set-4" class="hi-icon hi-icon-user">User</a>
					<a href="#set-4" class="hi-icon hi-icon-contract">Contact</a>
				</div>
				<div class="hi-icon-wrap hi-icon-effect-4 hi-icon-effect-4b">
					<a href="#set-4" class="hi-icon hi-icon-archive">Archive</a>
					<a href="#set-4" class="hi-icon hi-icon-chat">Chat</a>
					<a href="#set-4" class="hi-icon hi-icon-bookmark">Bookmarks</a>
					<a href="#set-4" class="hi-icon hi-icon-user">User</a>
					<a href="#set-4" class="hi-icon hi-icon-contract">Contact</a>
				</div>
				<p>Note that the dashed border on a round pseudo-element (border-radius: 50%) does not work in FF 21.0</p>
			</section>
			<section id="set-5">
				<div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a">
					<a href="#set-5" class="hi-icon hi-icon-mobile">Mobile</a>
					<a href="#set-5" class="hi-icon hi-icon-screen">Desktop</a>
					<a href="#set-5" class="hi-icon hi-icon-earth">Partners</a>
					<a href="#set-5" class="hi-icon hi-icon-support">Support</a>
					<a href="#set-5" class="hi-icon hi-icon-locked">Security</a>
				</div>
				<div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5b">
					<a href="#set-5" class="hi-icon hi-icon-mobile">Mobile</a>
					<a href="#set-5" class="hi-icon hi-icon-screen">Desktop</a>
					<a href="#set-5" class="hi-icon hi-icon-earth">Partners</a>
					<a href="#set-5" class="hi-icon hi-icon-support">Support</a>
					<a href="#set-5" class="hi-icon hi-icon-locked">Security</a>
				</div>
				<div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5c">
					<a href="#set-5" class="hi-icon hi-icon-mobile">Mobile</a>
					<a href="#set-5" class="hi-icon hi-icon-screen">Desktop</a>
					<a href="#set-5" class="hi-icon hi-icon-earth">Partners</a>
					<a href="#set-5" class="hi-icon hi-icon-support">Support</a>
					<a href="#set-5" class="hi-icon hi-icon-locked">Security</a>
				</div>
				<div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5d">
					<a href="#set-5" class="hi-icon hi-icon-mobile">Mobile</a>
					<a href="#set-5" class="hi-icon hi-icon-screen">Desktop</a>
					<a href="#set-5" class="hi-icon hi-icon-earth">Partners</a>
					<a href="#set-5" class="hi-icon hi-icon-support">Support</a>
					<a href="#set-5" class="hi-icon hi-icon-locked">Security</a>
				</div>
			</section>
			<section id="set-6">
				<div class="hi-icon-wrap hi-icon-effect-6">
					<a href="#set-6" class="hi-icon hi-icon-cog">Settings</a>
					<a href="#set-6" class="hi-icon hi-icon-support">Support</a>
					<a href="#set-6" class="hi-icon hi-icon-star">Fav</a>
					<a href="#set-6" class="hi-icon hi-icon-contract">Contract</a>
					<a href="#set-6" class="hi-icon hi-icon-refresh">Refresh</a>
				</div>
			</section>
			<section id="set-7">
				<div class="hi-icon-wrap hi-icon-effect-7 hi-icon-effect-7a">
					<a href="#set-7" class="hi-icon hi-icon-cog">Settings</a>
					<a href="#set-7" class="hi-icon hi-icon-clock">Time</a>
					<a href="#set-7" class="hi-icon hi-icon-videos">Videos</a>
					<a href="#set-7" class="hi-icon hi-icon-list">List</a>
					<a href="#set-7" class="hi-icon hi-icon-refresh">Refresh</a>
				</div>
				<div class="hi-icon-wrap hi-icon-effect-7 hi-icon-effect-7b">
					<a href="#set-7" class="hi-icon hi-icon-cog">Settings</a>
					<a href="#set-7" class="hi-icon hi-icon-clock">Time</a>
					<a href="#set-7" class="hi-icon hi-icon-videos">Videos</a>
					<a href="#set-7" class="hi-icon hi-icon-list">List</a>
					<a href="#set-7" class="hi-icon hi-icon-refresh">Refresh</a>
				</div>
			</section>
			<section id="set-8">
				<div class="hi-icon-wrap hi-icon-effect-8">
					<a href="#set-8" class="hi-icon hi-icon-archive">Archive</a>
					<a href="#set-8" class="hi-icon hi-icon-chat">Chat</a>
					<a href="#set-8" class="hi-icon hi-icon-bookmark">Bookmarks</a>
					<a href="#set-8" class="hi-icon hi-icon-user">User</a>
					<a href="#set-8" class="hi-icon hi-icon-contract">Contact</a>
				</div>
			</section>
			<section id="set-9">
				<div class="hi-icon-wrap hi-icon-effect-9 hi-icon-effect-9a">
					<a href="#set-9" class="hi-icon hi-icon-images">Images</a>
					<a href="#set-9" class="hi-icon hi-icon-pencil">Edit</a>
					<a href="#set-9" class="hi-icon hi-icon-link">Link</a>
					<a href="#set-9" class="hi-icon hi-icon-mail">Mail</a>
					<a href="#set-9" class="hi-icon hi-icon-location">Location</a>
				</div>
				<div class="hi-icon-wrap hi-icon-effect-9 hi-icon-effect-9b">
					<a href="#set-9" class="hi-icon hi-icon-images">Images</a>
					<a href="#set-9" class="hi-icon hi-icon-pencil">Edit</a>
					<a href="#set-9" class="hi-icon hi-icon-link">Link</a>
					<a href="#set-9" class="hi-icon hi-icon-mail">Mail</a>
					<a href="#set-9" class="hi-icon hi-icon-location">Location</a>
				</div>
			</section>
		</div><!-- /container -->
		<script>
			var hash = window.location.hash,
				current = 0,
				demos = Array.prototype.slice.call( document.querySelectorAll( '#codrops-demos > a' ) );

			if( hash === '' ) hash = '#set-1';
			setDemo( demos[ parseInt( hash.match(/#set-(\d+)/)[1] ) - 1 ] );

			demos.forEach( function( el, i ) {
				el.addEventListener( 'click', function() { setDemo( this ); } );
			} );

			function setDemo( el ) {
				var idx = demos.indexOf( el );
				if( current !== idx ) {
					var currentDemo = demos[ current ];
					currentDemo.className = currentDemo.className.replace(new RegExp("(^|\\s+)" + 'current-demo' + "(\\s+|$)"), ' ');
				}
				current = idx;
				el.className = 'current-demo';
			}
		</script>
	</body>
</html>