banner手风琴伸缩动画（ECMAJavaScript）

最新推荐文章于 2023-02-06 11:22:49 发布

$(薛定谔的喵)

最新推荐文章于 2023-02-06 11:22:49 发布

阅读量562

点赞数 1

分类专栏： web前端 JavaScript DOMjs

本文链接：https://blog.csdn.net/Chad97/article/details/82285795

版权

本文介绍了如何使用ECMA JavaScript来创建手风琴式Banner动画，强调了虽然CSS实现更为便捷，但通过JavaScript理解动画原理对开发者基础的巩固有所帮助。内容包括HTML和CSS代码示例，以及通过鼠标事件和动画效果实现的详细步骤。

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

这里写图片描述

当然，我知道像这种类型的的效果，我们通过C3来实现— animation: move 1s infinite;
是比较方便的而且业比较简单，能才做的效果业比较多，而我这里通过ECMAJavaScript来实现是比较繁杂和老套的，在实际开发过程中我们是尽可能选择方便简单且符合需求的方法来实现的；而我这里缩做的比较符合那做兼容性代码来使用
且我们在写和理解这些代码的过程中能为我们打下一个扎实的基础，对我们使用封装过的方法或者修改方法属性和效果来说是有好处的，例如jQuery更利于我们去理解和使用

<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

  <style>

    ul {
      list-style: none;
    }
    * {
      margin: 0;
      padding: 0

关注