以下是 css3标题悬停效果 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; 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>css3标题悬停效果</title>
<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 demo-1">
<header>
<h1>css3标题悬停效果</h1>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Effect 1</a>
<a href="index2.html">Effect 2</a>
<a href="index3.html">Effect 3</a>
<a href="index4.html">Effect 4</a>
<a href="index5.html">Effect 5</a>
<a href="index6.html">Effect 6</a>
<a href="index7.html">Effect 7</a>
</nav>
</header>
<ul class="grid cs-style-1">
<li>
<figure>
<img src="images/1.png" alt="img01">
<figcaption>
<h3>Camera</h3>
<span>Jacob Cummings</span>
<a href="#/?shots/1115632-Camera">
Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/2.png" alt="img02">
<figcaption>
<h3>Music</h3>
<span>Jacob Cummings</span>
<a href="#/?shots/1115960-Music">
Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/4.png" alt="img04">
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
<a href="#/?shots/1116685-Settings">
Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/5.png" alt="img05">
<figcaption>
<h3>Safari</h3>
<span>Jacob Cummings</span>
<a href="#/?shots/1116775-Safari">
Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/3.png" alt="img03">
<figcaption>
<h3>Phone</h3>
<span>Jacob Cummings</span>
<a href="#/?shots/1117308-Phone">
Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/6.png" alt="img06">
<figcaption>
<h3>Game Center</h3>
<span>Jacob Cummings</span>
<a href="#/?shots/1118904-Game-Center">
Take a look</a>
</figcaption>
</figure>
</li>
</ul>
</div><!-- /container -->
<script src="js/toucheffects.js"></script>
</body>
</html>
JS代码(toucheffects.js):
/** Used Only For Touch Devices **/
( function( window ){
// for touch devices:add class cs-hover to the figures when touching the itemsif( Modernizr.touch ){
// classie.js https://github.com/desandro/classie/blob/master/classie.js// class helper functions from bonzo https://github.com/ded/bonzofunction classReg( className ){
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management// altho to be fair,the api sucks because it won't accept multiple classes at oncevar hasClass,addClass,removeClass;
if ( 'classList' in document.documentElement ){
hasClass = function( elem,c ){
return elem.classList.contains( c );
}
;
addClass = function( elem,c ){
elem.classList.add( c );
}
;
removeClass = function( elem,c ){
elem.classList.remove( c );
}
;
}
else{
hasClass = function( elem,c ){
return classReg( c ).test( elem.className );
}
;
addClass = function( elem,c ){
if ( !hasClass( elem,c ) ){
elem.className = elem.className + ' ' + c;
}
}
;
removeClass = function( elem,c ){
elem.className = elem.className.replace( classReg( c ),' ' );
}
;
}
function toggleClass( elem,c ){
var fn = hasClass( elem,c ) ? removeClass:addClass;
fn( elem,c );
}
var classie ={
// full nameshasClass:hasClass,addClass:addClass,removeClass:removeClass,toggleClass:toggleClass,// short nameshas:hasClass,add:addClass,remove:removeClass,toggle:toggleClass}
;
// transportif ( typeof define === 'function' && define.amd ){
// AMDdefine( classie );
}
else{
// browser globalwindow.classie = classie;
}
[].slice.call( document.querySelectorAll( 'ul.grid > li > figure' ) ).forEach( function( el,i ){
el.querySelector( 'figcaption > a' ).addEventListener( 'touchstart',function(e){
e.stopPropagation();
}
,false );
el.addEventListener( 'touchstart',function(e){
classie.toggle( this,'cs-hover' );
}
,false );
}
);
}
}
)( window );
CSS代码(default.css):
/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@font-face{font-family:'codropsicons';src:url('../fonts/codropsicons/codropsicons.eot');src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),url('../fonts/codropsicons/codropsicons.woff') format('woff'),url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');font-weight:normal;font-style:normal;}
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body,html{font-size:100%;padding:0;margin:0;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{font-family:'Lato',Calibri,Arial,sans-serif;color:#b3b9bf;background:#f9f9f9;}
a{color:#888;text-decoration:none;}
a:hover,a:active{color:#333;}
/* Header Style */
.container > header{margin:0 auto;padding:2em;text-align:center;background:rgba(0,0,0,0.01);}
.container > header h1{font-size:2.625em;line-height:1.3;margin:0;font-weight:300;}
/* To Navigation Style */
.codrops-top{background:#fff;background:rgba(255,255,255,0.6);text-transform:uppercase;width:100%;font-size:0.69em;line-height:2.2;}
.codrops-top a{padding:0 1em;letter-spacing:0.1em;color:#888;display:inline-block;}
.codrops-top a:hover{background:rgba(255,255,255,0.95);color:#333;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
.codrops-icon:before{font-family:'codropsicons';margin:0 4px;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;}
.codrops-icon-drop:before{content:"\e001";}
.codrops-icon-prev:before{content:"\e004";}
.codrops-icon-archive:before{content:"\e002";}
.codrops-icon-next:before{content:"\e000";}
.codrops-icon-about:before{content:"\e003";}
/* Demo Buttons Style */
.codrops-demos{padding-top:1em;font-size:0.9em;}
.codrops-demos a{display:inline-block;margin:0.5em;padding:0.7em 1.1em;border:3px solid #b3b9bf;color:#b3b9bf;font-weight:700;}
.codrops-demos a:hover,.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover{border-color:#2c3f52;color:#2c3f52;}
@media screen and (max-width:25em){.codrops-icon span{display:none;}
}
分享到QQ
分享到微博
微信扫一扫
