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

PetitQ 图片/图形 2019-1-19 1.27K 0 0

这是一款使用纯 CSS3 制作的效果非常炫酷的鼠标滑过图片缩放和标题效果。该 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 则会被水平对齐放置。