当前位置：
  1. 首页
  2. html
  3. 正文
本文介绍: 我们浏览网页的时候总能看见一些炫酷的特效，比如百叶窗效果，本文我们就用HTML+CSS制作一个百叶窗小项目，适合刚学前端的小伙伴，使用代码简单易懂，很容易上手，学习完本文后，相信你也能敲出来属于自己的百叶窗效果，改变图片及相应盒子的大小，有女朋友的可以试着放几张在一起的照片，也是一件非常浪漫的事

在这里插入图片描述

推荐学习专栏：

前言

我们浏览网页的时候总能看见一些炫酷的特效，比如百叶窗效果，本文我们就用HTML+CSS制作一个百叶窗小项目，适合刚学前端的小伙伴，使用代码简单易懂，很容易上手，学习完本文后，相信你也能敲出来属于自己的百叶窗效果，改变图片及相应盒子的大小，有女朋友的可以试着放几张在一起的照片，也是一件非常浪漫的事，话不多说，开始代码的讲解。

1、百叶窗效果

该项目实现几张图片的动态切换，鼠标到达对应图片位置即可显示完整图片
在这里插入图片描述

动态效果

在这里插入图片描述

2、原理讲解

使用相同的几个盒子来组织“百叶窗”，每个盒子用来放一张照片，将所有放照片的小盒子放在一个大盒子里，对每个盒子进行操作就可以实现想要的效果了，具体操作请往下看。

设置样式

overflow：给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。（也可以利用overflow：hidden清除浮动）

注意：

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

3、制作百叶窗

  1. 首先在桌面创建一个空文件夹，将文件夹直接拖入VSCode（开发工具）

  2. 进入之后在图示位置右击新建文件夹，命名img，可存放展示的照片，再右击新建一个.html的文件（即网页文件），然后就可在此文件下写代码了

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rdmtjtiQ-1668615121824)

  3. 写html模板，！+enter 即可

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e44c1feZ-1668615121825)

  4. 先固定结构，在<body&gt; </body&gt; 下写 <ul&gt; </ul&gt; <li&gt; </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>

  5. 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、资源下载

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

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>
      <li><img src="img/p6.jpeg" alt="" /></li>
    </ul>
  </body>
</html>

总结

通过学习这些有意思的小项目，不仅可以加深知识的理解，也更能提升我们对前端的学习兴趣，感兴趣的小伙伴可订阅博主专栏，学习前端基础知识，制作自己想要的特效吧！

显示所有内容
上一篇 HTML5+CSS3综合案例-新闻列表
下一篇 如何让flex布局中的一个子元素单独右侧对齐

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。