当前位置：首页 > 网页特效 > 动画效果

炫酷CSS3鼠标滑过图片动画特效

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

炫酷CSS3鼠标滑过图片动画特效

简介

#####  HTML结构
该鼠标滑过图片动画效果的HTML结构使用Bootstrap来布局，布局非常简单：

```html
<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="box">
                <img src="images/1.jpg" alt="">
                <div class="over-layer">
                    <h3 class="title">Web designer</h3>
                    <p class="description">描述文字...</p>
                    <ul class="social-links">
                        <li><a href="#" class="fa fa-download"></a></li>
                        <li><a href="#" class="fa fa-link"></a></li>
                        <li><a href="#" class="fa fa-search"></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
```
#####  CSS样式
一幅图片和它的描述文本都包裹在一个div.box容器中，为容器设置透视效果。

```html
.box{
    position: relative;
    perspective: 1000px;
}  
```
图片开始时透明度为1，宽度为100%容器宽度，高度自适应，并设置ease-in-out的动画过渡效果。

.box img{
```html
    width: 100%;
    height: auto;
    opacity:1;
    transform: translateY(0) rotateX(0);
    transition: all 0.6s ease-in-out 0s;
}    
```              
在鼠标滑过图片的时候，图片沿Y轴移动-100%（即向上移动，移动距离为图片的高度），并沿X轴旋转90度，由于设置了旋转的中心为图片的底部，所以得到的效果为图片向上并翻转的效果。

```html
box:hover img{
    transform: translateY(-100%) rotateX(90deg);
    transform-origin: center bottom 0;
    opacity:0;
}    
```              
图片的文字层开始使透明度为0，定位方式使用绝对定位，宽度和高度都为100%容器宽度和高度，同样设置ease-in-out的动画过渡效果。

```html
.box .over-layer{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    background:#333d4b;
    text-align:center;
    padding: 0 20px;
    transition: all 0.60s ease-in-out 0s;
}        
```          
在鼠标滑过时，它的透明度被设置为1。

```html
.box:hover .over-layer{
    opacity:1;
}  
```                
完整的CSS样式代码请参考下载文件。

web299.com

炫酷CSS3鼠标滑过图片动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果