html 图片选中效果,使用html5 svg和css3制作神奇的图片hover效果
如果你曾经访问过新版的Christmas Experiments网站，那么你一定被网站上的日历效果所吸引。今天我们将和大家一起来研究如何使用SVG和Snap.svg来实现这种效果。思路是用svg创建一个带标题的背景，然后在鼠标hover的时候使它变形为另一种形状。有很多可行的方案来制作它，今天我们将创建三种不同的效果。利用SVG的好处是，我们可以任意调整它在父容器中的大小，将它们做成流式布局。
HTML结构:
我们要做的第一件事是什么呢？应该先用矢量软件制作一个矢量图形。可以用Adobe Illustrator或者Inkscape。每个图形都包含一条路径，我们需要使用它四个角的坐标来完成svg。这里我们将一个矩形转换为路径，如果你使用Inkscape，你可以将整个图形选中，然后选择Path > Object to Path，点的坐标可以在Edit > XML Editor中得到...，可以参考下面的截图：
html结构我们使用一个section，给它加上class grid，然后在其下放置a标签，并在a标签中放入figure，这里你也可以使用无序列表，但会多写一些代码。
figure中将包含一张图片、我们制作的图形和一个figcaption。
每个SVG将有自己的viewBox值，并将preserveAspectRatio设置为none。
这将使我们能够将形状调整和拉伸到我们想要的尺寸。我们将在样式表中定义它的宽度和高度。鼠标hover时图形的信息将保存在data-path-hover中。
CSS样式：
注意：下面的css没有包含各个厂商的前缀。
这些样式将被三种效果使用。首先写通用样式，然后在为每种效果写自己的样式。
先从grid开始，让它居中，并给它一个max-width和一个百分比的宽度，使它具有响应性。
.grid {
margin: 40px auto 120px;
max-width: 1000px;
width: 90%;
}
a元素要左浮动，我们给它一个最大宽度250px，并给它一个25%的实际宽度，这样一行能放4张图片，并且是响应式的。我们后面还要处理小屏幕(平板和手机)的问题。
.grid a {
float: left;
max-width: 250px;
width: 25%;
color: #333;
}
为了给奇数的图片一些偏移，我们设置顶部的margin 30px，底部的amrgin -30px，这将做出一个很好看的网格，就像Christmas Experiments网站上的那样。
.grid a:nth-child(odd) {
margin: 30px 0 -30px 0;
}
figure要设置为相对定位，因为我们需要设置它的一些子元素为绝对定位。由于鼠标悬停效果可能会导致一些溢出，所以我们要设置overflow为“hidden”。
.grid figure {
position: relative;
overflow: hidden;
margin: 5px;
background: #333;
}
图片要和它的父元素一样宽，透明度设置为0.7左右。当鼠标hover的时候我们希望透明度有所变化，所以加上个transition。
.grid figure img {
position: relative;
display: block;
width: 100%;
opacity: 0.7;
transition: opacity 0.3s;
}
figcaption需要绝对定位，并且宽度和高度都设置为100%。
.grid figcaption {
position: absolute;
top: 0;
z-index: 11;
padding: 10px;
width: 100%;
height: 100%;
text-align: center;
}
h2和p元素在鼠标hover时都会运动，所以我们分别给他们设置transitions。
.grid figcaption h2 {
margin: 0 0 20px 0;
color: #3498db;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 300;
font-size: 130%;
transition: transform 0.3s;
}
.grid figcaption p {
padding: 0 20px;
color: #aaa;
font-weight: 300;
transition: opacity 0.3s, transform 0.3s;
}
.grid figcaption h2,
.grid figcaption p {
transform: translateY(50px);
}
所有效果中的按钮样式都是一样的。按钮在hover时也有一些动画，所以添加一个transition来改变它的透明度和动画效果。
.grid figure button {
position: absolute;
padding: 4px 20px;
border: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
transition: opacity 0.3s, transform 0.3s;
}
为了避免一些闪烁和抖动，我们需要将所有的动画元素和它们的父元素的backface-visibility设置为hidden。
.grid figcaption,
.grid figcaption h2,
.grid figcaption p,
.grid figure button {
backface-visibility: hidden;
}
SVG也应该是绝对定位的，并将它的宽和高设置为100%，在Firefox26.0中顶部定位会有一些偏差，所以我们给它的top设置为-1px来修补这个bug。
.grid svg {
position: absolute;
top: -1px; /* fixes rendering issue in FF */
z-index: 10;
width: 100%;
height: 100%;
}
使用白色来填充图形的路径。
.grid svg path {
fill: #fff;
}
通用的鼠标hover效果应该像下边这样:
.grid a:hover figure img {
opacity: 1;
}
.grid a:hover figcaption h2,
.grid a:hover figcaption p {
transform: translateY(0);
}
.grid a:hover figcaption p {
opacity: 0;
}
当标题上升到指定位置后，图片的透明度应该设置为1。
现在，让我们来为每种效果制作各自的样式。
在第一种效果中，我们希望按钮有白色的边并且居中。在最开始的时候它是隐藏和缩小的。我们使用transforms来定位它，并使它缩小，当鼠标hover的时候，我们将使按钮慢慢放大。
.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;
transform: translateY(-50%) translateX(-50%) scale(0.25);
}
.demo-1 .grid a:hover figure button,
.demo-3 .grid a:hover figure button {
opacity: 1;
transform: translateY(-50%) translateX(-50%) scale(1);
}
在第二种效果中，我们定义了其它一些颜色来使按钮隐藏在figure下面。我们设置它的bottom为0,然后translate它到100%，当鼠标hover的时候，我们将它的上升效果设置为“ease-out”。
.demo-2 body {
background: #e74c3c;
}
.demo-2 .grid figcaption h2 {
color: #e74c3c;
}
.demo-2 .grid figcaption p {
transition-delay: 0.05s;
}
.demo-2 .grid figure button {
bottom: 0;
left: 0;
padding: 15px;
width: 100%;
background: #fff;
color: #333;
font-weight: 300;
transform: translateY(100%);
}
.demo-2 .grid a:hover figure button {
transition-timing-function: ease-out;
transform: translateY(0);
}
第二和第三种效果的标题和段落设置一种“cubic-bezier”效果，这将有助于模拟弹性过渡，当鼠标悬停的时候我们设置段落的延时为0，这将能确保党SVG图形到达顶部时段落能很快的消失。
.demo-2 .grid figcaption h2,
.demo-2 .grid figcaption p,
.demo-3 .grid figcaption h2,
.demo-3 .grid figcaption p {
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 {
transition-delay: 0s;
transition-duration: 0.1s;
}
第三种效果我们将改变一些颜色，在鼠标hover时将标题translate一点，而不是设为0。
.demo-3 body {
background: #52be7f;
}
.demo-3 .grid figcaption h2 {
color: #52be7f;
}
.demo-3 .grid a:hover figcaption h2 {
transform: translateY(5px);
}
对于小屏幕，我们要改变每行显示的图片数量，我们将重置宽度和奇数子元素的margin，第2、5、8、11个a元素要设置一个margin，可以通过nth-child(3n-1)来实现。
小提示：如果你想快速的找到某种序列的表达式，你可以到WolframAlpha去输入你的序列，它能很快的计算出该序列的表达式。
对于更小尺寸的屏幕，我们将通过设置max-width和标题的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;
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;
}
}
JAVASCRIPT
我们将使用Snap.svg，它是一个很棒的SVGs库，要想知道它是如何工作的，请先看一下它的文档和入门教程。
我们先设置speed和easing的值，然后创建一个变量来保存路径上的信息和悬停的路径。当鼠标悬停的时候，我们将动画路径转变为“to”状态，鼠标离开时，将动画转变为“form”状态。
(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();
})();
教程就到这里，我们展示了三种效果，你可以发挥想象，制作更多的神奇效果！