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

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

前言

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

1、百叶窗效果

该项目实现几张图片的动态切换,鼠标到达对应图片位置即可显示完整图片

动态效果

2、原理讲解

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

设置样式

  • 设置box的宽高 外边距 边框 overflow(溢出隐藏)

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

*{
      margin=0;
      padding=0;
    }
  • 利用选择器分别设置每个部分的样式

注意:

  • 因为ul是块级元素,所以为了方便可以把ul设置为弹性布局
  • 因为ul li是自带内外边距的标签,可以更灵活方便的控制网页的标签
  • 利用transition设置百叶窗过渡时间

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

  • 把img设置为块级元素,设置宽高
  • 设置hover效果(hover为伪类选择器)
  • hover: 鼠标伪类 ,冒号(:)后面的hover 是固定的写法,冒号(:)前面是要添加hover伪类的 目标 (目标尽量不要写成标签选择器),指定的目标: 最好是单一的。
  • 作用: 鼠标移入移出的时候触发指定样式
  • 鼠标移入时: 触发 hover的样式
  • 鼠标移出时: 回到 初始样式。
  • 整个hover中的代码,都不会被加载 使用hover伪类时,将 子代(后代)选择器
  • 写在hover之后会表示: :前面是触发者 hover之后的是 显示者

3、制作百叶窗

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

  3. 写html模板,+enter 即可

  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>
  1. 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>

总结

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

目录
打赏
0
0
0
0
3
分享
相关文章
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示
《HTML5+JavaScript动画基础》——导读
由于书中的示例都是通过HTML5与JavaScript实现的,因此接下来我们会指导你学习那些用于理解示例所需的特定编程技术。JavaScript是一门有趣、强大而又相对精简的语言,不过因为它的灵活性,它的用法可以变得千奇百怪。
1943 0
《HTML5+JavaScript动画基础》——导读
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问