效果图：在案例中 会不断的在文字中产生气泡 并且向上进行移动  然后进行消失 的一个动画html：当载入页面的时候 声明俩个数组  通过for循环 对demo的宽度 进行遍历  并且将每次遍历的结果 添加到arr空数组当中紧接着创建一个randomValue函数 接收数组 在内部对这个参数的长度 通过random方法 产生一个随机数 并且 return出去最后创建一个定时器 通过randomValue产生一个随机的尺寸 在bubbles中插入一个新建标

       效果图：效果中 每一个文字 进行不同频率的抖动 主要是通过 关键帧动画以及 对每一个文字 进行延迟设置 从而达到效果 这里需要给span设置为 行内块级元素html：css：使用弹性布局 使文字居中 并且 设置好共同样式以及动画   * {         padding: 0;   &nbsp

   效果图：在效果中可以看见 当扇叶进行重合时 背景颜色为透明 仅边框有颜色 展开时 通过旋转的方式 让每一片 扇叶运动到指定位置html：box中子元素div作为每一片扇叶 而span作为中间的白色圆心 通过定位的以旋转进行实现首先声明自定义元素 对每一片扇叶进行定义 :root {         --b1: #d4145a;   &nbsp

   效果图：在案例中 仿一个飞机窗口的特效 可以看见窗户外面的白云在进行移动 当点击上面的窗户时 可以进行一个关闭的效果html：在box中 外面将top作为窗户关闭的门板 cloud作为白云 通过css进行修饰 <div class="box">       <div class="top"></div> &

          效果图：当载入页面完成之后 会将默认的数组内容 动态添加为便签  且每次生成的位置 都不同 在输入框中进行输入 通过点击键盘的确认  将内容添加到页面中 html：结构分别为 一个承载标签的盒子 另一个为输入框在js中先声明一个变量去接收创建完成的标签 colors提供便签的颜色 紧着在createItem函数中创建便签 通过Math.random去随机生成一个颜色 然后将接收的text 和颜色&

   效果图：在案例中 当页面加载完之后 卷轴就会从中间 向俩边打开 并且在完全打开之后 文字会逐渐显示出来 html：在box中 设置五个div 分别为左右的卷轴部分 以及文字区域在css中通过定位以及层级的方式 对卷轴内容区域进行隐藏 只显示俩侧      .box1-pic {         backgroun

     效果图：当点击骰子的时候 骰子会进行一个旋转动画 然后固定在一个点 并且在文本中 会显示出几点 这次主要时 是通过js以及css中设置好的类进行一个替换 实现的动画html：骰子部分主要是通过图片进行展示  通过弹性布局 让盒子进行水平垂直居中显示 筛子部分 通过margin在盒子内居中通过对图片的定位跳转 设置好六个面显示的位置 .dice-1 {       &n

           效果图：扑克发牌效果图是通过给每一个扑克 通过在css中设置好对应的位置 然后在js里面通过each遍历以及setTimeout来进行给对应的扑克设置不同的延时html：给每一个的扑克东设置正反俩个面 当鼠标移入时 进行翻转    <div id="projects">      &n

        效果图：案例中的魔方 进行这360度的3d旋转 并且当鼠标标移入的同时 每一个面都发出了 不同的颜色htnl：设置cube为魔方主体 内部六个divv分别对应六个面先给body和world设置好 弹性布局 让它水平垂直居中  并且设置好景深接下来就是对魔方的主体部分的设置 先将魔方的共同样式进行设置 将何止设置为3d 给父子元素 设置好子绝父相定位最后就是对六个面的位置以及颜色进行设置了 包括旋转动画.cube .cube__fr

           效果图：在输入框中 进行字母和数字输入的时候 可以看见 输入的数字字母 会从输入框内不同的位置大小 飞出html：css:     * {         padding: 0;        &n