CSS3_创意的图片堆叠效果

前端开发环境gulp 前端开发的环境搭建 搭建前端es6开发环境

我们常常遇到这样一种效果,有多张图片,最初只在页面上呈现一张图片,当触发某个按钮 时,更多的图片呗展现出来。

我们使用了一些简单,但有创意的动作来表现这一效果,使它看上去更有趣,大大提升了页 面的设计感!

该例子中使用到了 transform 3D等技术。所以该特效只能在IE9+,Chrome,safari, firefox中使用。

案例中的图片素材由 Isaac Montemayor 提供.

让我们试着创建一组效果:

html代码:

<figure class=”stack stack-sidegrid”>
<img src=”img/1.png” alt=”img01″/>
<img src=”img/3.png” alt=”img03″/>
<img src=”img/4.png” alt=”img04″/>
<img src=”img/2.png” alt=”img02″/>
</figure>

我们使用figure标签来包裹这四张图片。

除了最后一张图片,其他图片都设置成absolute,绝对定位。

css代码:

.stack {
margin: 20px auto;
width: 400px;
padding: 0;
position: relative;
max-width: 100%;
}

.stack img {
max-width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s;
}

.stack img:last-child {
position: relative;
}

然后对图片的旋转角度和位置进行变化。

在案例中我们给图片设置了较小的尺寸,实际开发中你可以随意指定图片的尺寸,并做一些微调。

odoo前端开发环境 web前端开发的环境搭建 vue前端开发环境配置

» 本文来自:前端开发者 » 《CSS3_创意的图片堆叠效果》
» 本文链接地址:https://www.rokub.com/5969.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!