前端练习-第四周

推荐一个小视频 掌握CSS的5个技巧
里面讲到的5个技巧分别是

1. 样式调整
   包括基本的颜色、大小、边距等调整
2. 布局调整
   脱离文档流：position:absolute / position:fixed / float
   不脱离文档流：transform:translate[X|Y|Z]
   响应式布局：@media
3. 形状、特效的拆解和合并
   三角：设置边框border可以获得不同的三角形状；
   水波特效：背景圆半径变大同时opacity从1到0
4. 页面组件设计原则
   在设计组件时，首先分析设计稿中哪些组件大体相同，然后把他们的公共样式抽离出来，有特殊情况时通过组合class来覆盖已有的样式
   公共类、utility class
5. 模块化

• 通过选择器选择对应的html元素，应用样式
• 设置元素外观、比如颜色、背景、字体等
• 调整元素的位置和与其他元素的间距
• 安排一组元素或者整个页面的布局
• 覆盖或继承已有样式

上周复盘

共完成5个作业

image.png

钟表难度比较大，关键的是：位置旋转及文字反转
CSS transform中的rotate的旋转中心通过transform-origin设置，默认变形的原点在元素的中心点，或者是元素X轴和Y轴的50%处。
下面这张图比较直观

image.png

何同学的关键是结构设计和布局

width: calc(100%/12); //将width分成12份
display:inline-block; //行内快元素，支持宽度设置
//每一部分的动画，延迟执行，用宽度控制控制每一页的显示隐藏
@keyframes part {
    0% {
      width: 0px;
    }
    100% {
      width: 100%;
    }
  }

B站一剑三连更加复杂，利用before、after伪元素添加添加很多对称修饰的形状，元素旋转形成向四周辐射的效果，元素位置变换形成点击抖动的效果。

下周任务

本周是这次计划的最后一天，安排两个新任务

image.png

增加李立超老师课程中的背景练习、电影卡片练习、淘宝导航。