工作日志 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>
定义一个 div 作为 3D 区域
- #pages-3d {
- perspective: 800;
- perspective-origin: 50% 50%;
- overflow: hidden;
- }
定义一个 3D 动作父级
- #page-group {
- width: 400px;
- height: 400px;
- margin: 0 auto;
- transform-style: preserve-3d;
- position: relative;
- }
定义若干动画块
- .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);
- }
定义块的动态 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) 依照程序的实现分解
来源: http://www.bubuko.com/infodetail-3446306.html