以下是 形状变化SVG鼠标悬停效果代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en" class="demo-1 no-js">
<head>
<meta charset="gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>形状变化SVG鼠标悬停效果</title>
<meta name="description" content="Hover Effects with animated SVG Shapes using Snap.svg" />
<meta name="keywords" content="animated svg, hover effect, grid, svg shape html, " />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<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/snap.svg-min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="codrops-header">
<h1>形状变化SVG鼠标悬停效果</h1>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
</nav>
</header>
<section id="grid" class="grid clearfix">
<a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="img/1.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Crystalline</h2>
<p>Soko radicchio bunya nuts gram dulse.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="img/3.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Cacophony</h2>
<p>Two greens tigernut soybean radish.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="img/5.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Languid</h2>
<p>Beetroot water spinach okra water.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="img/7.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Serene</h2>
<p>Water spinach arugula pea tatsoi.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="img/2.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Nebulous</h2>
<p>Pea horseradish azuki bean lettuce.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="img/4.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Iridescent</h2>
<p>A grape silver beet watercress potato.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="img/6.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Resonant</h2>
<p>Chickweed okra pea winter purslane.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="img/8.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Zenith</h2>
<p>Salsify taro catsear garlic gram.</p>
<button>View</button>
</figcaption>
</figure>
</a>
</section>
</div><!-- /container -->
<script>
(function() {
function init() {
var speed = 250,
easing = mina.easeinout;
[].slice.call ( document.querySelectorAll( '#grid > a' ) ).forEach( function( el ) {
var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
pathConfig = {
from : path.attr( 'd' ),
to : el.getAttribute( 'data-path-hover' )
};
el.addEventListener( 'mouseenter', function() {
path.animate( { 'path' : pathConfig.to }, speed, easing );
} );
el.addEventListener( 'mouseleave', function() {
path.animate( { 'path' : pathConfig.from }, speed, easing );
} );
} );
}
init();
})();
</script>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<html lang="en" class="demo-1 no-js">
<head>
<meta charset="gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>形状变化SVG鼠标悬停效果</title>
<meta name="description" content="Hover Effects with animated SVG Shapes using Snap.svg" />
<meta name="keywords" content="animated svg, hover effect, grid, svg shape html, " />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<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/snap.svg-min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="codrops-header">
<h1>形状变化SVG鼠标悬停效果</h1>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a class="current-demo" href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
</nav>
</header>
<section id="grid" class="grid clearfix">
<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="img/2.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
<figcaption>
<h2>Crystalline</h2>
<p>Soko radicchio bunya nuts gram dulse.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="img/4.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
<figcaption>
<h2>Cacophony</h2>
<p>Two greens tigernut soybean radish artichoke.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="img/6.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
<figcaption>
<h2>Languid</h2>
<p>Beetroot water spinach okra water chestnut.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="img/8.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
<figcaption>
<h2>Serene</h2>
<p>Water spinach arugula pea tatsoi.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="img/1.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
<figcaption>
<h2>Nebulous</h2>
<p>Pea horseradish azuki bean lettuce.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="img/3.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
<figcaption>
<h2>Iridescent</h2>
<p>A grape silver beet watercress potato.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="img/5.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
<figcaption>
<h2>Resonant</h2>
<p>Chickweed okra pea winter purslane.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="img/7.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
<figcaption>
<h2>Zenith</h2>
<p>Salsify taro catsear garlic gram.</p>
<button>View</button>
</figcaption>
</figure>
</a>
</section>
</div><!-- /container -->
<script>
(function() {
function init() {
var speed = 330,
easing = mina.backout;
[].slice.call ( document.querySelectorAll( '#grid > a' ) ).forEach( function( el ) {
var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
pathConfig = {
from : path.attr( 'd' ),
to : el.getAttribute( 'data-path-hover' )
};
el.addEventListener( 'mouseenter', function() {
path.animate( { 'path' : pathConfig.to }, speed, easing );
} );
el.addEventListener( 'mouseleave', function() {
path.animate( { 'path' : pathConfig.from }, speed, easing );
} );
} );
}
init();
})();
</script>
</body>
</html>
JS代码(hovers.js):
/** * hovers.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2014,Codrops * http://www.codrops.com */
(function(){
function init(){
var speed = 250,easing = mina.easeinout;
[].slice.call ( document.querySelectorAll( '#grid > a' ) ).forEach( function( el ){
var s = Snap( el.querySelector( 'svg' ) ),path = s.select( 'path' ),pathConfig ={
from:path.attr( 'd' ),to:el.getAttribute( 'data-path-to' )}
;
el.addEventListener( 'mouseenter',function(){
path.animate({
'path':pathConfig.to}
,speed,easing );
}
);
el.addEventListener( 'mouseleave',function(){
path.animate({
'path':pathConfig.from}
,speed,easing );
}
);
}
);
}
init();
}
)();
CSS代码(component.css):
/* Common style */
.grid{margin:40px auto 120px;max-width:1000px;width:90%;}
.grid a{float:left;max-width:250px;width:25%;color:#333;}
.grid a:nth-child(odd){margin:30px 0 -30px 0;}
.grid figure{position:relative;overflow:hidden;margin:5px;background:#333;}
.grid figure img{position:relative;display:block;width:100%;opacity:0.7;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;}
.grid figcaption{position:absolute;top:0;z-index:11;padding:10px;width:100%;height:100%;text-align:center;}
.grid figcaption h2{margin:0 0 20px 0;color:#3498db;text-transform:uppercase;letter-spacing:1px;font-weight:300;font-size:130%;-webkit-transition:-webkit-transform 0.3s;transition:transform 0.3s;}
.grid figcaption p{padding:0 20px;color:#aaa;font-weight:300;-webkit-transition:opacity 0.3s,-webkit-transform 0.3s;transition:opacity 0.3s,transform 0.3s;}
.grid figcaption h2,.grid figcaption p{-webkit-transform:translateY(50px);transform:translateY(50px);}
.grid figure button{position:absolute;padding:4px 20px;border:none;text-transform:uppercase;letter-spacing:1px;font-weight:bold;-webkit-transition:opacity 0.3s,-webkit-transform 0.3s;transition:opacity 0.3s,transform 0.3s;}
.grid figcaption,.grid figcaption h2,.grid figcaption p,.grid figure button{-webkit-backface-visibility:hidden;backface-visibility:hidden;}
/* Style for SVG */
.grid svg{position:absolute;top:-1px;/* fixes rendering issue in FF */
z-index:10;width:100%;height:100%;}
.grid svg path{fill:#fff;}
/* Hover effects */
.grid a:hover figure img{opacity:1;}
.grid a:hover figcaption h2,.grid a:hover figcaption p{-webkit-transform:translateY(0);transform:translateY(0);}
.grid a:hover figcaption p{opacity:0;}
/* Individual styles */
.demo-1 body{background:#3498db;}
.demo-1 .grid figure button,.demo-3 .grid figure button{top:50%;left:50%;border:3px solid #fff;background:transparent;color:#fff;opacity:0;-webkit-transform:translateY(-50%) translateX(-50%) scale(0.25);transform:translateY(-50%) translateX(-50%) scale(0.25);}
.demo-1 .grid a:hover figure button,.demo-3 .grid a:hover figure button{opacity:1;-webkit-transform:translateY(-50%) translateX(-50%) scale(1);transform:translateY(-50%) translateX(-50%) scale(1);}
.demo-2 body{background:#e74c3c;}
.demo-2 .grid figcaption h2{color:#e74c3c;}
.demo-2 .grid figcaption p{-webkit-transition-delay:0.05s;transition-delay:0.05s;}
.demo-2 .grid figure button{bottom:0;left:0;padding:15px;width:100%;background:#fff;color:#333;font-weight:300;-webkit-transform:translateY(100%);transform:translateY(100%);}
.demo-2 .grid a:hover figure button{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transform:translateY(0);transform:translateY(0);}
.demo-2 .grid figcaption h2,.demo-2 .grid figcaption p,.demo-3 .grid figcaption h2,.demo-3 .grid figcaption p{-webkit-transition-timing-function:cubic-bezier(0.250,0.250,0.115,1);/* older webkit */
-webkit-transition-timing-function:cubic-bezier(0.250,0.250,0.115,1.445);timing-function:cubic-bezier(0.250,0.250,0.115,1.445);}
.demo-2 .grid a:hover figcaption p,.demo-3 .grid a:hover figcaption p{-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0.1s;transition-duration:0.1s;}
.demo-3 body{background:#52be7f;}
.demo-3 .grid figcaption h2{color:#52be7f;}
.demo-3 .grid a:hover figcaption h2{-webkit-transform:translateY(5px);transform:translateY(5px);}
/* Media Queries */
/* Let's redefine the width of each anchor and the margins */
@media screen and (max-width:58em){.grid a{width:33.333%;}
.grid a:nth-child(odd){margin:0;}
.grid a:nth-child(3n-1){margin:30px 0 -30px 0;}
}
@media screen and (max-width:45em){.grid{max-width:500px;}
.grid a{width:50%;}
.grid a:nth-child(3n-1){margin:0;}
.grid a:nth-child(even){margin:30px 0 -30px 0;}
.grid figcaption h2{margin-bottom:0px;-webkit-transform:translateY(30px);transform:translateY(30px);}
.grid figcaption p{margin:0;padding:0 10px;}
}
@media screen and (max-width:27em){.grid{max-width:250px;}
.grid a{width:100%;}
.grid a:nth-child(even){margin:0;}
}
CSS代码(demo.css):
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@font-face{font-weight:normal;font-style:normal;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');}
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body{background:#333;color:#fff;font-weight:400;font-size:1em;font-family:'Lato',Arial,sans-serif;}
a,button{outline:none;}
a{color:#f0f0f0;text-decoration:none;}
a:hover,a:focus{color:#333;}
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
.codrops-header{margin:0 auto;padding:2em;text-align:center;}
.codrops-header h1{margin:0;font-weight:300;font-size:2.5em;line-height:1.3;}
.codrops-header h1 span{display:block;padding:0 0 0.6em 0.1em;font-size:60%;opacity:0.7;}
/* To Navigation Style */
.codrops-top{width:100%;text-transform:uppercase;font-weight:700;font-size:0.69em;line-height:2.2;}
.codrops-top a{display:inline-block;padding:0 1em;text-decoration:none;letter-spacing:1px;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{display:block;float:left;}
.codrops-icon:before{margin:0 4px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'codropsicons';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
.codrops-icon-drop:before{content:"\e001";}
.codrops-icon-prev:before{content:"\e004";}
/* Demo Buttons Style */
.codrops-demos{padding-top:1em;font-size:0.8em;}
.codrops-demos a{display:inline-block;margin:0.5em;padding:0.7em 1.1em;outline:none;border:2px solid #fff;color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:1px;font-weight:700;}
.codrops-demos a:hover,.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover{border-color:#333;color:#333;}
.related{text-align:center;font-size:1.5em;}
@media screen and (max-width:25em){.codrops-icon span{display:none;}
}
CSS代码(normalize.css):
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}
分享到QQ
分享到微博
微信扫一扫
