可视化设计合集

  1. box-shadow 凹凸效果 向阳叠加背光

  2. flex 居中

  3. 伪类,记得content填空字符串

  4. 方块叠加练习

  5. 练习把颜色和长宽转换成变量 (家庭作业:把阴影偏移度和模糊度也转换成变量)

  1. linear-gradient

  2. box-shadow

  3. 伪类制作三角形
    position:外relative内absolute

  1. position:外relative内absolute

  2. :hover vs. :active

  3. transform

  4. transition

  1. grayscale

  2. saturate

  3. sepia

  4. invert

  5. opacity

  6. brightness

  7. contrast

  8. hue-rotate

  9. blur

  1. -webkit-mask-image, *-position, *-repeat, *-size

  2. 更换图层练习

  1. -webkit-mask-image

  2. 鼠标跟随 mousemove:pageX,pageY,-webkit-mask-position-x,-webkit-mask-position-y

  1. clip-path,polygon

  2. animation,CSS文本编辑

  1. clip-path,polygon

  2. animation,CSS文本编辑

  1. mix-blend-mode

  2. 色调旋转 hue-rotate()

由众触低代码平台生成和驱动