前提：       在ES6中，class 作为对象的模板被引入，可以通过 class 关键字定义类，其实可以理解为函数，class类主要是针对于原型的一种语法糖写法，比原生的写法更清晰明了。使用class类定义：类表达式   可以通过匿名方式或者命名方式 代码如下：然后通过status进行使用 先对类进行实例  传入值为1 进行打印预览：、类声明和注意事项：这里就可以将class当做functio

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

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

    效果图：效果中 点击上传区域  将文件夹打开 选中图片 点击确定 进行图片上传并且在页面中 可以对上传的图片展示 展示区域 对图片名称进行显示 包括右侧点击删除 以及在上传完图片 对图片的总数 以及大小进行统计html：    <div id="app">       <div class=&

       效果图：爱心跳动案例 主要是通过 定位 以及关键帧动画 分别实现爱心的制作 和跳动 接下来进行分析html：设置一个盒子 里面写入一个span标签 爱心的主体通过 box的after和before加上定位进行设置 先将盒子通过 定位加transform进行水平垂直居中 并将伪类的共同样式写好 .box {         positi

     效果图：效果中云雾一直在移动 形成一种清晨云雾环绕的视觉效果 主要是通过设置一层云雾图片 覆盖在上面 通过运动图片达到云雾穿过的效果html：通过给box进行背景图设置 然后对ul下面的三张li 图片设置好宽高    * {         padding: 0;     &nb

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

     效果图：通过点击左右按钮 对卡片进行移动 当卡片左边或者右边到底时 给按钮进行disabled 进行禁用设置html： <template id="rollImg">       <div class="card-wrapper">       

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

    效果图：在效果中有无数个雪白色的雪花 从顶部向下移动 在快移动到底部白色区域时 颜色变淡然后消失 这个效果主要靠关键帧动画 以及单独给每一个雪花进行延时设置html：    <div class="background"></div>     <div class="snow snow1"&