CSS实现的图片缩进效果

最新推荐文章于 2025-05-27 11:12:37 发布

原创

最新推荐文章于 2025-05-27 11:12:37 发布 · 2.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5 #鼠标 #图片

鼠标未移动时：

鼠标悬停在某一张图片时：一张展开，其余的图片缩进。

代码部分

CSS代码：

@charset "utf-8";
/* CSS Document */

/*Now the styles*/
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: arial, verdana, tahoma;
    background-color: #ccc;
    background-image: url(../.idea/pic/1.gif);
    background-repeat: repeat;
}

/*时间申请手风琴工作宽度
图像= 640px下的宽度
总图像= 5
因此在图像的宽度= 640px
不悬停时在图像宽度= 40px -自己可以设置
所以集装箱总宽度= 640 + 40 * 4 = 800px；
默认宽度= 800 / 5 = 160px；

*/

.accordian {
    width: 800px; height: 400px;
    overflow: hidden;