工作日志 2020-03-03

工作日志 2020 年 03 月 03 日

第1工时

3D 动态效果,先试试水深不深

<div id="block"></div>
<div id="star"></div>

#block {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: #6699cc;
  margin: 0 auto;
  &:hover {
    & + #star {
      background-color: red;
      top: 300px;
      left: 500px;
    }
  }
}
#star {
  position: fixed;
  top: 100px;
  left: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #6699cc;
  transition: background-color 3s, top 3s ease-in, left 3s ease-in;
}

朋友在群里嚷着不想画页面,为啥别人恶心的东西,我在快乐的玩耍着...

transition: [要操作的属性] [多长时间(几秒)] [变化速率(匀速/先快再慢/先慢再快)]

多个属性的变化 用 逗号隔开

第2工时

3D区域的定义

#experiment {
  perspective: 200;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

3D块的定义

#club {
  width: 200px;
  height: 200px;
  background-color: #6699cc;
  margin: 100px auto;
  transform: rotateX(45deg);
  // transform: rotateY(45deg);
  // transform: rotateZ(45deg);
  // transform: translateZ(100px);
  // transform: translateZ(100px), rotateX(45deg);
  // transform: rotate3d(0, 0, 100px, 45deg);
  transform-origin: left;
}

第3工时

3D动画简单流程:

<div id="pages-3d">
    <div id="page-group">
        <div id="page1" class="page">1</div>
        <div id="page2" class="page">2</div>
        <div id="page3" class="page">3</div>
        <div id="page4" class="page">4</div>
        <div id="page5" class="page">5</div>
    </div>
</div>

1. 定义一个div 作为3D区域

   #pages-3d {
     perspective: 800;
     perspective-origin: 50% 50%;
     overflow: hidden;
   }
   

2. 定义一个3D动作父级

   #page-group {
     width: 400px;
     height: 400px;
     margin: 0 auto;
     transform-style: preserve-3d;
     position: relative;
   }
   

3. 定义若干动画块

   .page {
     width: 360px;
     height: 360px;
     padding: 20px;
     background-color: #000000;
     color: white;
     font-weight: bolder;
     font-size: 360px;
     line-height: 360px;
     text-align: center;
     position: absolute;
   }
   #page1 {
     transform-origin: bottom;
     transition: transform 1s linear;
   }
   #page2,
   #page3,
   #page4,
   #page5 {
     transform-origin: bottom;
     transition: transform 1s linear;
     transform: rotateX(90deg);
   }
   

4. 定义块的动态JS

     next() {
       if (this.ci === 5) return
       var curPage = $(`#page${this.ci}`)
       curPage.css({ transform: 'rotateX(-90deg)' })
       this.ci++
       var nextPage = $(`#page${this.ci}`)
       nextPage.css({ transform: 'rotateX(0deg)' })
     }
     prev() {
       if (this.ci === 1) return
       var curPage = $(`#page${this.ci}`)
       curPage.css({ transform: 'rotateX(90deg)' })
       this.ci--
       var nextPage = $(`#page${this.ci}`)
       nextPage.css({ transform: 'rotateX(0deg)' })
     }
   

第4工时

.button 类名冲突

模板读取方式调整至 已有情况

第5工时

实现了 后台取值

第6工时

实现了 table的 CODE值

第7工时

page 位置调整 实现后台取值

第8工时

page 跳转完成了

第9工时

TABLE控件 Alpha测试

目前: 后台取值,code转值,page跳转 3个基本功能已实现.

其余功能待补充.

第10工时

3D效果视频: 提出新的概念

区域模块分解:将模板进行空间分解. 左中右等等

VCD分解,

即 View(HTML+CSS)/Controller(JS)/Data(data.js) 依照程序的实现分解