【小案例】使用CSS过渡制作手风琴

首先，先来展示一下手风琴的最终效果：

浅分析一下吧！

我们需要做的就是当鼠标移入图片时，先让所有图片宽度变小，再让当前图片宽度变大，然后再利用CSS过渡效果，就可以完美实现上面的效果了。
transition: width 2s linear; 这是实现手风琴效果的灵魂。

下面是完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;list-style: none;}ul{width: 960px;height: 200px;border: 1px solid;margin: 50px auto;overflow: hidden;}ul li{width: 160px;height: 200px;float: left;transition: width 2s linear;}/* 移入ul后，li宽度变小 */ul:hover li{width: 100px;}/* 移入的当前的li宽度变大 */ul li:hover{width: 460px;}</style>
</head>
<body><ul><li><img src="./images/ad7.jpeg" alt=""></li><li><img src="./images/ad8.jpg" alt=""></li><li><img src="./images/ad9.jpeg" alt=""></li><li><img src="./images/ad10.jpg" alt=""></li><li><img src="./images/ad11.jpg" alt=""></li><li><img src="./images/ad12.jpg" alt=""></li></ul>
</body>
</html>

注意：

【小案例】使用CSS过渡制作手风琴相关推荐

HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果，css手风琴
纯js+html和纯css+html制作手风琴效果,css手风琴本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一.纯css+html的手风琴效 ...
html+css布局实例：CSS过渡-Transitions手风琴效果之鼠标位置的图片自动移动
效果图: 小伙伴们需要对CSS过渡-Transitions和前面的基础知识有一定了解你可以拿你自己的图片放进去: 小伙伴们我没有截取动图的软件,不能给你们看动图啦鼠标没有点击之前: 鼠标点击图片 ...
jquery制作html小游戏,使用css+JQuery制作开心农场小游戏模拟画面
效果如图所示: 代码如下所示: #bg { width: 500px; height: 280px; background-image: url(img/plowland.jpg); backgrou ...
小案例：用Python制作音乐播放器
以下是音乐播放器要实现的功能: 1.可以通过打开存放音频文件夹来添加音频 2.可以播放和暂停音频 3.可以设置播放音量需要实现音频播放器的模块: 1.pygame的音频播放功能 2.easygui的 ...
CSS3过渡小案例：折扇
CSS3过渡小案例:折扇简单应用:利用鼠标经过后盒子阴影和上边距属性的改变,制作一个简单的页面效果小案例:折扇案例 CSS3的过渡效果: 通过 CSS3的过渡效果,我们可以在不使用 Flash ...
javaScript小案例------js实现手风琴效果篇
原生js书写手风琴效果 js手风琴效果第一种方法手风琴需求 html和css: html: css: js animate.js index.js 第二种方法 js手风琴效果我用了两种方法来完成 ...
用CSS，制作“新闻标题”案例
用CSS,制作"新闻标题"案例 <!DOCTYPE html> <html lang="en"> <head><met ...
html列表太多转为下滑菜单,利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单...
利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单以往文章里面讲了使用CSS的position属性定位结合display制作下拉弹出菜单,名为<纯CSS制作下拉导航菜单> ...
Unity制作随机数字抽奖小案例
Unity制作随机数字抽奖小案例 1. 搭建 UI 界面 2. 实现思路 2-1. 创建 RandomNumber 类 [挂载在每个抽奖格子(Numbers下面的Image)] 2-2. 创建 Sta ...

【小案例】使用CSS过渡制作手风琴

【小案例】使用CSS过渡制作手风琴相关推荐

最新文章

热门文章