一个简单的前端手风琴图片滑动展示

最新推荐文章于 2023-08-29 22:08:46 发布

社会我王哥

最新推荐文章于 2023-08-29 22:08:46 发布

阅读量551

点赞数 1

分类专栏：前端html 文章标签： javascript css html vue.js

本文链接：https://blog.csdn.net/qq_36003214/article/details/104961848

版权

前端html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近做的一个项目正好要用到首页图片预览的手风琴效果，看了网上的教程，先学了一个，比较简单，基本上一看就会，话不多说上代码。

<style>
.wrap{
    overflow: hidden;
    float: left;
    width: 300px;
    height: 500px;
    transition: .5s;  //过渡效果
}
.container:hover .wrap{
    width: 200px;
}
.container .wrap:hover{
    width: 700px;
}
</style>

<div class="container" style="width: 1500px;height:800px;border:1px;">
<div class="wrap" style="background-color: aqua">1</div>
<div class="wrap" style="background-color: red">2</div>
<div class="wrap" style="background-color: yellow">3</div>
<div class="wrap" style="background-color: purple">4</div>
<div class="wrap" style="background-color: blue">5</div>
</div>