教你用HTML+CSS实现百叶窗动画效果_html百叶窗效果

最新推荐文章于 2024-07-31 11:41:46 发布

2401_84166396

最新推荐文章于 2024-07-31 11:41:46 发布

阅读量496

点赞数 3

分类专栏：程序员文章标签： html css 前端

本文链接：https://blog.csdn.net/2401_84166396/article/details/138297380

版权

程序员专栏收录该内容

184 篇文章 0 订阅

订阅专栏

本文详细介绍了如何利用CSS3的transition属性制作百叶窗效果，包括设置ul元素为弹性布局、处理hover状态下的宽度变化以及HTML结构的编写。同时提供了相关资源下载链接和鼓励系统学习和交流的社区邀请。

摘要由CSDN通过智能技术生成

注意：

因为ul是块级元素，所以为了方便可以把ul设置为弹性布局
因为ul li是自带内外边距的标签，可以更灵活方便的控制网页的标签

利用transition设置百叶窗过渡时间

transitition为css3动画内容，实现百叶窗效果的重要样式，过渡时间设置单位以s/ms为单位。

把img设置为块级元素，设置宽高
设置hover效果（hover为伪类选择器）

hover: 鼠标伪类，冒号（:）后面的hover 是固定的写法,冒号（:）前面是要添加hover伪类的目标 (目标尽量不要写成标签选择器)，指定的目标：最好是单一的。
作用：鼠标移入移出的时候触发指定样式
鼠标移入时：触发 hover的样式
鼠标移出时：回到初始样式。
整个hover中的代码，都不会被加载使用hover伪类时，将子代(后代)选择器
写在hover之后会表示：：前面是触发者 hover之后的是显示者

3、制作百叶窗

首先在桌面创建一个空文件夹，将文件夹直接拖入VSCode（开发工具）
进入之后在图示位置右击新建文件夹，命名img，可存放展示的照片，再右击新建一个.html的文件（即网页文件），然后就可在此文件下写代码了

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rdmtjtiQ-1668615121824)
3. 写html模板，！+enter 即可

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e44c1feZ-1668615121825)
4. 先固定结构，在<body> </body> 下写 <ul> </ul> <li> </li> 等盒子，src后边是需要插入图片的路径

<body>
    <ul>
      <li><img src="img/p1.jpeg" alt="" /></li>
      <li><img src="img/p2.jpeg" alt="" /></li>
      <li><img src="img/p3.jpeg" alt="" /></li>
      <li><img src="img/p4.jpeg" alt="" /></li>
      <li><img src="img/p5.jpeg" alt="" /></li>
      <li><img src="img/p6.jpeg" alt="" /></li>
    </ul>
</body>

CSS对html结构做装饰，即CSS样式，可设置盒子的大小，背景颜色，该部分在<head> 下<style> </style> 书写

以上代码中宽度需设置准确，可根据自己图片大小调整相应盒子的大小，最好放入的照片尺寸一致，transition 是对盒子动作的操作，设置变换时间为1s即可
CSS源码如下：

<style>
 /\* CSS 对html结构做装饰 \*/
 \* {
 list-style: none;
 margin: 0;
 padding: 0;
 }
 ul {
 display: flex; /\* 弹性布局 \*/
 width: 960px;
 height: 500px;
 background-color: #096;
 overflow: hidden; /\* 溢出隐藏 \*/
 }
 li {
 width: 160px;
 height: 500px;
 transition: all 1s;
 }
 img {
 height: 500px;
 }
 /\* 动作 变大 变小\*/
 ul:hover li {
 width: 40px;
 }
 ul li:hover {
 width: 760px;
 }
</style>

4、资源下载

案例效果图片等资源如下，需要的可自取

百度网盘：链接：
https://pan.baidu.com/s/19cmCorgWelAFRQhOSW2M8Q?pwd=o5un
提取码：o5un
CSDN下载：
https://download.csdn.net/download/CSDN_anhl/87050707

5、完整代码

<!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>百叶窗</title>
    <style>
 /\* CSS 对html结构做装饰 \*/
 \* {
 list-style: none;
 margin: 0;
 padding: 0;
 }
 ul {
 display: flex;
 /\* 弹性布局 \*/
 width: 960px;
 height: 500px;
 background-color: #096;
 overflow: hidden;
 /\* 溢出隐藏 \*/
 }
 li {
 width: 160px;
 height: 500px;
 transition: all 1s;
 }
 img {
 height: 500px;
 }
 /\* 动作 变大 变小\*/
 ul:hover li {
 width: 40px;
 }
 ul li:hover {
 width: 760px;
 }
 </style>
  </head>
  <body>
    <ul>
      <li><img src="img/p1.jpeg" alt="" /></li>
      <li><img src="img/p2.jpeg" alt="" /></li>
      <li><img src="img/p3.jpeg" alt="" /></li>
      <li><img src="img/p4.jpeg" alt="" /></li>
      <li><img src="img/p5.jpeg" alt="" /></li>


![img](https://img-blog.csdnimg.cn/img_convert/2a8e4cdab2e047cd9a77a8c89a1db2bf.png)
![img](https://img-blog.csdnimg.cn/img_convert/7b95772ccbd5cc87a991af59a168bd47.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**