纯CSS （无js）实现手风琴图片幻灯片效果

这是一次作业，但在无参考代码下自己写了一部分，然后参考了网友博客完成了部分，所以就不标为原创了，只是网友写得有点高深了，我就靠自己理解又写了一份。只是记录下来而已。

先看下默认打开效果，图片文件是老师给的，好像是传智播客的。

鼠标移上去（:hover）看到的效果

html代码部分，写的比较简单：

<div ><ul><li><span>付出不亚于任何人的努力</span><span>付出不亚于任何人的努力</span></li><li><span>谦虚戒骄</span><span>谦虚戒骄</span></li><li><span>天天反省</span><span>天天反省</span></li><li><span>活着就要感谢</span><span>活着就要感谢</span></li><li><span>积善行、思利他</span><span>积善行、思利他</span></li><li><span>不要有感性的烦恼</span><span>不要有感性的烦恼</span></li></ul>
</div>

主要效果在CSS代码中，也就是CSS3才能实现效果

li{list-style: none;width: 166px;height: 360px;float: left;background: no-repeat;position: relative;transition: 1s;box-shadow: -3px 0 5px #555;
}
li span{line-height: 360px;color: #fff;font-size: 18px;font-weight: bold;text-align: center;transition: 1s;/*背景及位置*/position: absolute;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);transition:all 1s;
}
/*使用背景方法放置图片，如果需要做成动态网页，直接在html标签里写成背景图片即可实现动态添加*/
li:nth-child(1){background-image: url(img/1.jpg);
}
li:nth-child(2){background-image: url(img/2.jpg);
}
li:nth-child(3){background-image: url(img/3.jpg);
}
li:nth-child(4){background-image: url(img/4.jpg);
}
li:nth-child(5){background-image: url(img/5.jpg);
}
li:nth-child(6){background-image: url(img/6.jpg);
}

以上都不需要多少解释的，使用背景图的方法是觉得尺寸和显示的问题，如果使用img标签，设置大小就需要width和height都设置，而background-image就可以很方便设置大小。

/*把其他li设置成40px*/
div ul:hover li{width: 40px;
}
/*选中的那个设置width*/
div ul li:hover{width: 980px;
}

就两三句话就可以实现左右两边变窄，我最开始想了好久都没想到，是参考网友才知道的。（不然我最开始使用 ~ 选择器使被选中的标签后面的标签的width变小，但只能动到后面的，改变不了后面的，所以才在网上找答案）

应用的原理我理解是：用div盒子把ul的体积变成块元素，如果没有这个不会有被选中的那个变大的效果，所以我理解就是利用div标签占着空间，使li在width变大的时候可以撑开，不然会被挤压的没效果。

因为鼠标移上ul就把li的width从166px设置成40px；同时也会移动到某个li标签，所以就把这个li标签的width变成你想要宽度（980px）。

因为添加了上下的透明背景文字栏，所以还有两个样式：

li:hover span{height: 30px;line-height: 30px;
}
li:hover :first-child{top: 0;
}
li:hover :last-child{bottom: 0;
}

实际就是对span标签进行位置以及背景设置，最开始的span实际是两个标签文字叠加在一起了，看起来像一个而已。本身我想用::before和::after来添加的，但出现文字被半透明背景盖住，所以就直接用span标签来做这个半透明背景文字栏。

最后全部完整的代码：

<!DOCTYPE html>
<html>
<head><title>手风琴图片轮播效果</title><style type="text/css">li{list-style: none;width: 166px;height: 360px;float: left;background: no-repeat;position: relative;transition: 1s;box-shadow: -3px 0 5px #555;}li span{line-height: 360px;color: #fff;font-size: 18px;font-weight: bold;text-align: center;transition: 1s;/*背景及位置*/position: absolute;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);transition:all 1s;}/*使用背景方法放置图片，如果需要做成动态网页，直接在html标签里写成背景图片即可实现动态添加*/li:nth-child(1){background-image: url(img/1.jpg);}li:nth-child(2){background-image: url(img/2.jpg);}li:nth-child(3){background-image: url(img/3.jpg);}li:nth-child(4){background-image: url(img/4.jpg);}li:nth-child(5){background-image: url(img/5.jpg);}li:nth-child(6){background-image: url(img/6.jpg);}/*把其他li设置成40px*/div ul:hover li{width: 40px;}/*选中的那个设置width*/div ul li:hover{width: 980px;}li:hover span{height: 30px;line-height: 30px;}li:hover :first-child{top: 0;}li:hover :last-child{bottom: 0;}</style>
</head>
<body><div ><ul><li><span>付出不亚于任何人的努力</span><span>付出不亚于任何人的努力</span></li><li><span>谦虚戒骄</span><span>谦虚戒骄</span></li><li><span>天天反省</span><span>天天反省</span></li><li><span>活着就要感谢</span><span>活着就要感谢</span></li><li><span>积善行、思利他</span><span>积善行、思利他</span></li><li><span>不要有感性的烦恼</span><span>不要有感性的烦恼</span></li></ul></div>
</body>
</html>

因为没有涉及到js以及jQuery，很值得学习一下

纯CSS （无js）实现手风琴图片幻灯片效果相关推荐

纯CSS无表达式实现图片等比缩放（支持IE7及以上）
在制作网页的时候,常常会遇到一种情况,我们需要把一些未知尺寸的图片放在一个固定宽高的容器中,这时候我们需要考虑这样的问题: 只给图片设置宽度或高度的其中一项可以实现图片等比缩放,但图片可能超出容器大小 ...
纯CSS+HTML+JS实现的简易个人网站
纯CSS+HTML+JS实现的简易个人网站这是我用CSDN这么久以来第一次用它写博客,废话不多说,先上干货,下面为大家展示一下我做的简易个人网站,我是用HTML+CSS+JS实现的,没有用到后台.网 ...
JS实现图片幻灯片效果
代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> &l ...
使用JS操作CSS实现JS改变背景图片
使用JS操作CSS实现JS改变背景图片在写一个后台管理系统的界面时候,想要实现每次刷新界面或者访问界面时候会重新加载一张图片并且每次都不一样,于是乎就去想了个方法去实现它,最终方案是通过js来改变d ...
126.如何使用CSS和 JS 创建简单图片切换
效果 (源码网盘地址在最后) 视频演示视频地址:https://www.ixigua.com/6914222592170263053/ 源码 index.html <!DOCTYPE html ...
HTML中的对联代码,纯CSS(非JS)代码实现固定对联的方法超短超实用！
之前用JS实现对联漂浮,从而固定它不让它随滚动条往上移,不过用了后感觉效果不是很好,因为JS一直在计算对联的位置,然后对其移位,如果滚动条拉得快一点,对联会先出现在屏幕下方,然后在JS的作用下,移到设 ...
php实现飘窗,JS实现网站图片飘窗效果，JavaScript悬浮广告（附详细代码）
原标题:JS实现网站图片飘窗效果,JavaScript悬浮广告(附详细代码) JS实现网站图片飘窗效果,Java悬浮广告,郑州SEO提供以下代码,仅供参考: 飘窗效果-丁光辉博客(www.dinggu ...
小猿圈用jQuery实现手风琴图片展示效果
对web前端了解的同学会知道jQuery是现在前端中使用的框架之一,但是你知道jQuery可以做到一些你意想不到的效果吗?下面小猿圈web前端老师用jQuery实现手风琴图片展示效果,希望对你有所帮助 ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...

纯CSS （无js）实现手风琴图片幻灯片效果

纯CSS （无js）实现手风琴图片幻灯片效果相关推荐

最新文章

热门文章