这是一款使用纯 CSS3 制作的效果非常炫酷的鼠标滑过图片缩放和标题效果。该CSS3图片效果中图片的边框被制作为不停动画的护栏效果,当用鼠标滑过图片时,图片会有非常炫酷的动画效果,并且不只是图片,每一层图片标题都有自己的动画效果。
CSS3 animations是一个非常神奇的技术,相比于javascript和flash,它只用少量的代码就可以制作出平滑的动画效果。现在,所有的现代浏览器,包括IE9都支持CSS3 transitions 和 animations。
插件中精美的插画来自于花瓣 。
使用方法
HTML结构
该CSS3图片效果中有两种HTML结构,一种使图片效果的,一种使纯文本效果的,下面是图片效果的HTML结构:
<div class="dAnim"> <div> <img src="i2.jpg" /> <div> Here's another picture <div> yes, It's awesome too </div> </div> </div> </div>
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