Kros的博客 Kros的博客
首页
  • CSS
  • 工具
  • Vue
  • js
  • Vue3
  • 算法
  • 折腾笔记
一言
  • 分类
  • 标签
  • 归档
码云

Kros

凡心所向,素履以往,生如逆旅,一苇以航
首页
  • CSS
  • 工具
  • Vue
  • js
  • Vue3
  • 算法
  • 折腾笔记
一言
  • 分类
  • 标签
  • 归档
码云
  • CSS

    • CSS绘制三角形
    • CSS排版上下文
    • CSS伪类
    • CSS伪元素
    • CSS实现列表元素分割线
    • CSS使用skew
    • CSS让物体居中
    • CSS绘制太极图
    • CSS使用实体替代预留符号
    • 动态修改after或before的content
    • CSS旋转border
    • CSS绘制空心五角星
    • CSS时钟
    • CSS图片手风琴伸缩效果
    • CSS的选择器
    • CSS波浪border
    • CSS内切圆角
    • CSS文字环绕
    • CSS outline使用详解
    • CSS使用transform缩放scale不生效
    • CSS使用linear-gradient或生成虚线
    • CSS 图片srcset属性
    • CSS object-fit属性详解
    • CSS 使用filter对颜色就行处理
    • CSS选择器的优先级
    • css与scss文件引入问题
    • CSS实现圆角梯形
    • 使用filter实现聚光灯效果
    • 利用backface-visibility hidden实现3d翻转双面card
    • 正方体3d旋转
    • 修改浏览器自动填充的背景颜色
    • CSS修改选中文字颜色
    • CSS实现打字机效果
    • marquee文字弹跳
    • logo文字图片倒影
    • 纯CSS实现popup弹窗
    • ie兼容inline-block
    • 浏览器默认样式
    • CSS效果-文字
    • CSS效果-按钮
    • css3 transition属性对linear-gradient渐变色无效
    • 不同预处理器下的样式穿透
    • 属性顺序
    • CSS重绘与回流
    • img标签与before和after
    • CSS实现文本两端对齐
    • CSS filter的contrast属性和blur属性奇特的结合
    • CSS不常用属性记录
    • CSS sprite雪碧图制作与使用
  • JavaScript

  • 工具

  • Vue

  • antdv踩坑记录

  • Vue3

  • 前端
  • CSS
kros
2021-02-24

CSS图片手风琴伸缩效果

鼠标进入图片时当前图片展开,其它图片收缩,同时只有一个图片展开。效果如下:

手风琴

代码如下:

<template>
	<div class="wrapper">
		<div class="list">
			<div class="item">
				<img src="https://pic1.zhimg.com/v2-3be05963f5f3753a8cb75b6692154d4a_720w.jpg?source=172ae18b.jpg" alt="bg2" class="image">
			</div>
			<div class="item">
				<img src="data:image/jpeg;base64,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" alt="bg1" class="image">
			</div>
			<div class="item">
				<img src="https://img95.699pic.com/photo/50046/5562.jpg_wh300.jpg" alt="bg2" class="image">
			</div>
			<div class="item">
				<img src="https://img95.699pic.com/photo/50136/1351.jpg_wh300.jpg" alt="bg1" class="image">
			</div>
			<div class="item">
				<img src="https://img95.699pic.com/photo/50034/0209.jpg_wh300.jpg" alt="bg2" class="image">
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		
	}
</script>

<style scoped lang="scss">
	.wrapper {
		width: 800px;
		height: 300px;
		.list {
      display: flex;
			height: 100%;
			overflow: hidden;
			// 该hover必须在item的hover前面,先触发
			// &:hover {
			// 	.item {
			// 		width: 50px;
			// 	}
			// }
			// item的hover需在后,后触发
			.item {
				display: inline-block;
        margin: 0 2px;
				overflow: hidden;
        width: 160px;
				height: 100%;
				transition: width .3s;
				
				.image {
					height: 100%;
				}
				
				&:hover {
					width: 600px;
				}
			}
		}
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
上次更新: 2025/09/05, 8:09:00
CSS时钟
CSS的选择器

← CSS时钟 CSS的选择器→

最近更新
01
Find the next perfect square
09-05
02
Regex validate PIN code
09-05
03
Find the odd int
09-05
更多文章>
Theme by Vdoing | Copyright © 2020-2025 kros king
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
icon-heart-o icon-heart icon-infinity icon-pause icon-play link next prev