基于js+css3图片层叠缩放展示特效代码

基于js+css3图片层叠缩放展示特效代码

一款平滑流畅的js+css3图片层叠布局缩放展示动画特效,鼠标悬停图片放大突出展示。

使用方法
在页面引入相关CSS样式文件

1
<link rel="stylesheet" href="css/style.css">

HTML结构
需要用到的HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="gallery-container">
    <div class="gallery">
        <div class="frame">
            <img class="image" src="img/pumpernickel.png"/>
            <div class="info">Pumpernickel</div>
        </div>
        <div class="frame">
            <img class="image" src="img/rye.png"/>
            <div class="info">Rye</div>
        </div>
        <div class="frame">
            <img class="image" src="img/wheat.png"/>
            <div class="info">Wheat</div>
        </div>
        <div class="frame">
            <img class="image" src="img/ciabatta.png"/>
            <div class="info">Ciabatta</div>
        </div>
        <div class="frame">
            <img class="image" src="img/baguette.png"/>
            <div class="info">Baguette</div>
        </div>
    </div>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
4

发表评论