效果图：案例中当数字在进行加载的同时 旁边会有俩条光线依靠这着 进行旋转html：我们首先将基本样式 以及动画进行设置      * {         padding: 0;         margin: 0; &nbs

     效果图：可以看见我们进行号码的随机筛选 并且将中间四位数进行了遮挡 一共设置了三个等级奖项 并且给每一个奖项设置了 固定的人数 当人数已经足够的时候 在此点击按钮机会进行提示 人数已满 切换下一个奖项html：  <div class="box">         <div class=&q

        效果图：在案例中可以看见 边框进行旋转的时候 左侧的边框经过文字 会显示在文字底部 而右边的边框经过文字 则会将文字遮挡注 主要是通过给盒子的before和after 进行定位设置 让他们先重合 然后给任意一个伪类进行设置层级小于盒子当前层级 即可html：首先是给a标签进行文本设置 以及通过定位的方式 进行水平垂直居中紧接着我们对before和after的共同样式进行设置 让他们通过绝对定位 重合到一起 并且 也进行水平垂直居中

   效果图：案例中的太阳 包括月亮动画 都是依靠关键帧动画以及定位进行实现 代码如下：太阳：html：css： .box {         position: relative;         font-size: 1rem;    &nbsp

  效果图：从效果图当中 可以清楚的看见 当载入页面的时候 文字次左侧移动到中间 并且从后向前的进行移动 直至消失html：css中 我们将文字进行居中设置 然后设置好作为移动的关键帧动画 添加代div中   * {         padding: 0;         mar

        效果图：在案例中 我们通过点击按钮将对应的颜色进行筛选展示出来 并且使用vue中transition-group 进行过渡动画设置在根实例data中将需要的颜色以及其他数据准备好 const app = new Vue({     el: "#app",   &n

         效果图：效果中的星星布满整个屏幕 这里我们通过jQuery去动态的创建节点 并且随机的去设定位置以及颜色html：：在入口函数中 去创建俩个变量 一个为星星的个数 另一个为星星的颜色数组通过for循环去遍历num创建demo节点 首先对尺寸以及颜色进行随机筛选然后给视图层中的demo节点选中 向内部插入元素 并将刚才随机的尺寸以及颜色写入 再对它的left 跟top 进行随机设置设置一个间隔定时器  让它每隔10000

         效果图:案例中的俩种颜色的小圆球 旋转效果图 我们通过vue去动态的创建节点 通过添加关键帧动画让它进行旋转 以及缩放现在根实例中创建一个空数组为items然后在钩子函数中对items进行赋值 new一个数组对象  通过获取文档宽度除以70 来获取一个值 作为数组的值最后我们只要将items数组在试图从中 进行遍历 并且内部写入俩个div 作为俩种不同的圆球 分别给它们设置好延时完整代码：<!DOCTYPE&nb

        效果图：爱心圆点从左向右进行动画 动画完成加载出一个爱心形状 然后再从左到右进行缩小 这里我们可以用到伪类进行单独修饰 以及关键帧动画html：接下来就是对li的基础样式修饰 以及通过nth-child对每一个li进行不同颜色的设置    * {         padding: 0;  &n

     效果图：案例中三个方块 分别对应的是小时/分钟/秒 当任何一个方块中的数字进行改变时 对应的方块就会进行跳动 这里我们需要引入css库html：在js中我们先封装一个处理事件的函数 获取当前的小时 分钟 秒然后将视图层中的demo节点获取我们在这里进行if判断 当前demo节点中的文本 不等于现在获取的时间(字符串) 而右边获取到是数据需要通过三元运算符进行出路 当hours小于10返回一个0 大于10返回空字符串 跟当前的hours相加 最后进