html图片放缩特效,CSS3炫酷的鼠标滑过图片缩放和标题效果

这是一款使用纯 CSS3 制作的效果非常炫酷的鼠标滑过图片缩放和标题效果。该CSS3图片效果中图片的边框被制作为不停动画的护栏效果，当用鼠标滑过图片时，图片会有非常炫酷的动画效果，并且不只是图片，每一层图片标题都有自己的动画效果。

CSS3 animations是一个非常神奇的技术，相比于javascript和flash，它只用少量的代码就可以制作出平滑的动画效果。现在，所有的现代浏览器，包括IE9都支持CSS3 transitions 和 animations。

插件中精美的插画来自于花瓣 。

使用方法

HTML结构

该CSS3图片效果中有两种HTML结构，一种使图片效果的，一种使纯文本效果的，下面是图片效果的HTML结构：

Here's another picture

yes, It's awesome too

CSS样式

该CSS3图片效果的背景有连续动画的效果，图片的缩放和旋转效果是在鼠标滑过它的父元素div时被触发的。下面是主要的CSS代码:

.dAnim

{

padding:5px;

font-family:Georgia,Verdana;

border:1px solid #bbb;

display:inline-block;

position:relative;

/* on Mouseout animation */

/* The -webkit- and -ms- vendor prefixes are added */

/* for chrome and ie10+ comptability */

transition: transform .2s ease-out;

-webkit-transition: -webkit-transform 0.2s ease-out;

-ms-transition: -ms-transform .2s ease-out;

transform: scale(1) rotate(0deg);

-webkit-transform: scale(1) rotate(0deg);

-ms-transform: scale(1) rotate(0deg);

/* CSS3 Stripes as a Background Image*/

background-image: linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);

background-image: -moz-linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);

background-image: -ms-linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);

background-image: -o-linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);

background-image: -webkit-gradient(linear, 100% 100%, 0 0,color-stop(.25, #dadada), color-stop(.25, #c2c2c2),color-stop(.5, #c2c2c2),color-stop(.5, #dadada),color-stop(.75, #dadada),color-stop(.75, #c2c2c2),color-stop(1, #c2c2c2));

background-image: -webkit-linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);

background-size: 40px 40px;

/* Background stripes animation */

animation: bganim 3s linear 2s infinite;

-webkit-animation: bganim 3s linear 2s infinite;

-ms-animation: bganim 3s linear 2s infinite;

z-index:98;

}

@keyframes bganim { from {background-position:0px;} to { background-position:40px;} }

@-webkit-keyframes bganim { from {background-position:0px;} to { background-position:40px;} }

@-ms-keyframes bganim { from {background-position:0px;} to { background-position:40px;} }

.dAnim:hover

{

/* The hovered element needs to be the top element */

z-index:99;

/* Main div mouseover animation */

transform: scale(1.3) rotate(2deg);

-webkit-transform: scale(1.3) rotate(2deg);

-ms-transform: scale(1.3) rotate(2deg);

}

.dAnim div

{

border:1px solid transparent;

background-color:white;

/* Inside divs mouseout animation */

transition: transform .2s ease-out;

-webkit-transition: -webkit-transform .2s ease-out;

-ms-transition: -ms-transform .2s ease-out;

transition-delay:.1s;

-webkit-transition-delay:.1s;

-ms-transition-delay:.1s;

transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

}

.dAnim:hover div

{

border:1px solid #444;

/* Inside divs mouseover animation */

transform: rotate(-2deg);

-webkit-transform: rotate(-2deg);

-ms-transform: rotate(-2deg);

}

所有在class为.dAnim的div中的div元素都会执行上面的代码。根据你放置的div的位置的不同，所有父元素中的div元素都会有不同的效果。例如，如果div是嵌套的，它们将是一个持续累加倾斜的效果。就是每一个div都累加2度的倾斜度。如果不是div则会被水平对齐放置。

上面的代码就会得到下面的效果：

Here's another picture

yes, It's awesome too