效果图：在效果中 每一个数字都在进行向上滚动 达到它对应的数字 html：在视图层创建一个demo 其余标签通过js创建插入我们声明一个对象event 封装三个函数 分别是number方法是作用是 接收一个参数 创建一个新数组 通过对传入参数的长度进行遍历 然后通过charAt查找对应索引的参数 添加到数组当中 在遍历结束 返回该数组第二个方法是创建demo节点 当前方法去·接收一个数组 对该数组进行遍历 通过索引去

     效果图：在案例中 鼠标在导航上进行移动的时候 会出现一个边框 跟随鼠标进行滑动 鼠标移出则消失 点击导航时 阴影部分的方块 会滑动到点击的导航栏上面html：准备好一个盒子 导航栏用ul li表示 边框盒子 跟阴影部分 我们通过span标签使用定位的方式进行设置 <div class="box">       <ul>  &

      效果图：在案例中 每一个区域 进行不同的加载完成的效果 主要是通过在进入页面的时候 动态的去给每一个盒子添加一个遮罩层 以及上面的icon图标 然后使用动画的方式 让图标进行转动达到一种视觉上的加载效果 最后通过定时器将将遮罩层进行移除 也就是删除动态添加的demo节点 加载完成html:在css中除了视图层中的五个盒子进行样式设置外 还需要给icon图标以及 动态添加的盒子进行一个样式设置   * { &nbsp

       效果图：从上面的效果中可以看出 当鼠标移动滑块时 图片的box-shadow会随之进行改变 并且下面的box-shadow会显示 其更改的值html：当滑块移动时 我们给其绑定oninput事件 获取到其改变的value值然后使用value进行阴影参数的计算 分为俩边进行计算将计算出来的值  按css设置的样式合并到一起在赋值之前要进行一个判断 当滑块滑动的值 除以50 小于0.5时 shadow变量只进行largeShadow赋值

       效果图：效果中 可以看见字体在进行翻转 也可以说是几行字体依次的在进行转动 这次我们是通过gsap.js插件来实现的效果 gsap.js下载地址：https://gsap.comhtml：主要结构还是在item中设置俩个盒子 一个用作与正面 另一个通过旋转到右侧 然后使用插件进行旋转    <div class="items">  &nbsp

       效果图：效果中 鼠标进入页面时 鼠标指针进行了一个变换  当鼠标在页面上移动时 经过的地方会产生需要蓝色的圈圈 进行放大然后消失  视图层中不进行div设置 通过js生成demo 然后绑定样式然后通过定时器进行div移除在js中 先给文档绑定鼠标事件 mousemove 传入事件对象  阻止鼠标默认事件 获取到鼠标的坐标然后创建标签 通过模板字符串设置好class样式 以及获取到的鼠标坐标给 top left进行

     效果图：这次的效果 依靠引入anime.js插件完成 显示动画运行百叶窗关闭消失  然后标题逐个显示 字段 从上向下移动anime.js地址：https://animejs.com/html：只要就俩个部分 文字以及百叶窗 将文字水平垂直居中 更改颜色样式然后通过网格布局 将排列分成十份显示在js中先引入 anime.js 创建实例 设置好动画时间以及运动曲线通过实例的add方法对将我们需要运动的demo选中 然后对宽度 背景颜色 以及

        效果图：通过引入RotateVerify插件 进行旋转验证 通过滑块给图片进行旋转 当图片转正 则验证通过<script src="./js/jqRotateVerify.js"></script>html： <div id="rotateWrap" style="margin-top: 50px"&g

      效果图：在效果中通过点击 左侧的拉绳 进行开关灯 每次关灯之后 在开灯 兔子进行随机切换html：背景颜色 可以通过给body进行class绑定 在off跟on之间进行切换来实现开关灯在js中先封装俩个函数 分别为 给拉绳添加动画 包括 每次开灯之后兔子类型进行随机切换动画添加删除：兔子图片进行随机筛选切换：在点击拉绳之后 进行if判断  检查body上是否有类on 有就进行开灯显示  并对样式进行更改 没有则增加类 on进行关灯处理

        效果图：在案例中 有无数的星星在进行运动 星云密布 其实是通过js遍历创建标签添加类 插入到父节点当中 然后进行随机生成位置 通过关键帧动画进行移动移动html：在css中先将背景颜色以及父节点设置好父元素css：这里注意需要给父元素进行景深以及转换成3d 等设置好 不然就没有看见的效果咯      .stars {     &nb