纯CSS实现图片百叶窗展示效果
纯CSS图片百叶窗
首先给大家看一下完成效果
主要思路:其实这个百叶窗还是利用了一种障眼法,我们看上去是鼠标移动上去之后,图片展开了,其实这些图片在原地根本没有动,只不过是我们把这些图片放在了一个列表里,相互叠加,鼠标移动的同时改变列表的宽度。
第一步:构建一个百叶窗框架
html代码:
<div class="container"><ul><li></li><li></li><li></li><li></li><li></li></ul></div>
css代码:
*{margin: 0;padding: 0;}.container{margin: 100px auto;border: 2px solid #568bc7;width: 800px;height: 300px;}.container ul{display: flex;}.container li{width: 160px;height: 300px;list-style: none;border-left: 1px solid #194b8d;}.container li img{display: block;width: 800px;height: 300px;}
需要注意一下:这里的li可能需要手动计算等分的宽度,虽然可以用弹性盒子实现自动等分,但是我后面加了hover之后发现会有BUG,大家可以试试,这里就不使用弹性盒子了
现在得到如下框架:
第二步:插入图片,使用hover做出特效
我这里插入了五张油画
这里我们可以发现图片超过了我们容器的范围
此时我们在外容器中添加,做一个溢出隐藏
overflow: hidden;
这样一个百叶窗就出具规模了
如何让图片和演示GIF一样动起来呢?
这里涉及到一段核心代码
.container ul:hover li{width: 40px;}.container ul li:hover{width: 600px;}
这个Demo 其实是对:hover属性灵活运用的一个练习,
首先要注意,两行代码的顺序不可以更换
首先鼠标移入 ul 的大容器内时,我们首先要让 li 的宽度变小,紧接着触发下一行的hover ,移入到每一个 li 的时候,让 li 的宽度变大
第三步:细节处理
完成以上之后,我们看到整个过程非常的生硬
这里可以加入过渡属性,让变化变得更加平滑 ,同时给每一个 li 的左边框加上一点阴影效果,让他看起来更加的立体
box-shadow: 0 0 25px #000;transition: all 0.5s;
最后就完成啦
这里是完整代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.container{margin: 100px auto;border: 2px solid #568bc7;width: 800px;height: 300px;overflow: hidden;}.container ul{display: flex;}.container li{width: 160px;height: 300px;list-style: none;border-left: 1px solid #194b8d;box-shadow: 0 0 25px #000;transition: all 0.5s;}.container li img{display: block;width: 800px;height: 300px;}.container ul:hover li{width: 40px;}.container ul li:hover{width: 600px;}</style>
</head>
<body><div class="container"><ul><li><img src="./img/tq1.jpg" alt=""></li><li><img src="./img/tq2.jpg" alt=""></li><li><img src="./img/tq3.jpg" alt=""></li><li><img src="./img/tq4.jpg" alt=""></li><li><img src="./img/tq5.jpg" alt=""></li></ul></div>
</body>
</html>
纯CSS实现图片百叶窗展示效果相关推荐
- code block怎样实现图形界面_纯CSS实现图片百叶窗展示效果
主要思路:其实这个百叶窗还是利用了一种障眼法,我们看上去是鼠标移动上去之后,图片展开了,其实这些图片在原地根本没有动,只不过是我们把这些图片放在了一个列表里,相互叠加,鼠标移动的同时改变列表的宽度. ...
- html 图片自动滚动播放,小卖弄:纯CSS实现图片滚动播放效果
一.效果抢先 如果您手头上的浏览器是FireFox6+,或者教新版本的Chrome或是Safari浏览器,就可以看到类似上面截图的效果.完全CSS挑大梁,JS请假回家相亲去了. 二.原理简述 显然,要 ...
- css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果,CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
- HTM+CSS实现立方体图片旋转展示效果
目的:HTM+CSS实现立方体图片旋转展示效果 环境: 系统:Win10 环境: 一.示例1. 话不多说直接上代码 <html><head><style>/*立方体 ...
- 纯css实现图片自动闪光划过效果
纯css实现图片自动闪光划过效果 <!DOCTYPE html> <html> <head> <meta name="viewport" ...
- html怎么把字做成动画效果,利用纯CSS实现动态的文字效果实例
大家可能经常会看到类似酷炫的网站: 在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. 接下来,我以我目前的工程项目为例, ...
- php动态字体,利用纯CSS实现动态的文字效果实例
相信大家都曾在网站中看到过中效果,一打开页面,无论是文字还是图片,都随着规定时间的而变化,今天我们将介绍如何通过用纯CSS来实现这种效果,下面一起来看看. 大家可能经常会看到酷炫的网站 在这类网站中能 ...
- 45个纯 CSS 实现的精美边框效果【附演示和源码】【下篇】
边框效果常用来给图片添加照片效果或用于增强页面内容片断的整体性,在一些团购网站和使用瀑布流布局的网站也经常会使用边框效果.在以前,简单的边框效果使用 CSS 可以轻松实现,但是用到阴影.弯曲和旋转等复 ...
- 45个纯 CSS 实现的精美边框效果【附在线演示和源码】【下篇】
边框效果常用来给图片添加照片效果或用于增强页面内容片断的整体性,在一些团购网站和使用瀑布流布局的网站也经常会使用边框效果.在以前,简单的边框效果使用 CSS 可以轻松实现,但是用到阴影.弯曲和旋转等复 ...
最新文章
- 2021年中国工业互联网安全大赛核能行业赛道writeup之日志分析
- 文本分类中的一些小问题
- 如何优雅关闭 Spring Boot 应用
- http协议下:为什么请求与响应会做到准确误的对应。不会出现请求与响应的错乱...
- 苹果公司的新的编程语言 Swift 高级语言()两--基本数据类型
- 随手小记·080911
- JAVA程序员已成为最疯狂的加班行业,没有之一?
- C++ ACM模式输入输出
- 【yarn】yarn 命令行查看 资源状态
- Example of Zookeeper and Solr cluster with Docker networking
- 下载UltraEdit UE 破解版方法
- aide, libgdx写一个爱心小游戏
- 关于 虚拟机交叉编译目标机程序,使用filezilla的ftp方式传输到板子上没问题,后来同样环境传入应用运行宕机 的解决方法
- 蘑菇街2016校园招聘——聊天
- Vue 拦截器 多接口调用 实现唯一loding效果 解决同步接口调用loding闪动
- webstorm下载后打不开改怎么办
- Quartz配置上次任务没有执行完,下次任务推迟执行
- 社会学与计算机哪个考研容易,国内几所较热的社会学系考研难度比较
- 酷炫的交互动画和视觉效果
- 『德不孤』Pytest框架 — 14、Pytest参数化