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

超酷图片画廊鼠标滑过图片动画过渡特效

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

超酷图片画廊鼠标滑过图片动画过渡特效

简介

#####  HTML结构
该特效使用嵌套div的HTML结构，每一个div.gallery-item是一个卡片，里面包含了图片和描述信息。

```html
<div class="container">
  <div class="gallery">
    <div class="gallery-item">
      
      <div class="gallery-item-image">
            <img src="img/1.jpg">
          </div>
          
          <div class="gallery-item-description">
            <h3>Image title</h3><span>......</span></div>
        </div>
    </div>
 
    ......
 
  </div>
</div>        
```
#####  CSS样式
画廊采用flex进行布局，这个画廊设置最大宽度和100%的视口高度。

```html
.gallery{
  width: 100%;
  max-width: 960px;
  min-height: 100vh;
  margin: 2rem auto;
   
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
   
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
   
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
} 
```           
画廊中的每一个图片卡片都设置了固定的宽度和高度，并设置了一些阴影效果。

```html
.gallery-item{
  box-shadow: 2px 2px 8px -1px #3498DB;
  width: 300px;
  height: 300px;
  margin: 10px;
  background: #000;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}   
```              
图片使用绝对定位，宽度和高度都等于卡片的宽度和高度，并设置了0.5秒的ease过渡动画效果。

.gallery-item-image{
```html
  position: absolute;
  width: 100%;
  height: 100%;
  background: lightblue;
  z-index:20;
  -webkit-transition:all .5s ease;
  transition: all .5s ease;
  bottom:0;
  overflow: hidden;
}      
```            
当鼠标滑过卡片时，移动图片的bottom属性，使图片向上移动。

```html
.gallery-item:hover .gallery-item-image{
  bottom: 80px;
}   
```

web299.com

超酷图片画廊鼠标滑过图片动画过渡特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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