2020.8.18+王杉

学习内容:

转换:

1.转换分为2D(x轴、y轴)和3D(x轴、y轴、z轴)的转换。

2.2Dtransform效果和取值:

  • 位移:translate 缩放:scale 旋转:rotate 倾斜:skew

3.3Dtransform效果和取值:

  • 旋转:translate 缩放:scale 旋转:rotate 倾斜:skew,相较于2D多一个Z轴
  • *透视距离:模拟人的眼睛到3D转换的元素之间的距离。距离不同,看到效果不同,实现3D效果。(perspective:1000px;)

4.样式:transform-style:flat(2D效果)preserve-3D(子元素保留3D位置)

5.转换原点transform-origin:有三种取值方式:

  1. px单位数字
  2. %取值
  3. 关键字如:x:left/center/right y:left/center/right

过渡:

使css的值,在一段时间内平缓变化的效果。过度的代码要写在原本样式中,过渡效果有去有回,如果写在hover中,过渡效果有去无回。

具体过渡的属性有:

  1. transition-property:过渡属性支持(一般all代表所有属性)
  2. transition-duration:过度事件(s为单位)
  3. transition-timing-function:动作方式(ease:默认值,慢开,中快,慢关)默认(liner匀速)常用等。
  4. transition-delay:过渡时间(s为单位)

*简写:transition : property duration timing-function delay;

动画:

动画:多个过渡用关键帧控制从一种样式变成另一种样式。

关键帧:动画执行节点,至少两个关键帧。

动画的声明:使用@keyframes{

(内容至少两个关键帧:开始和结束) }

具体动画属性:

  1. 动画名称:animation-neme:
  2. 动画执行事件;animation-duration:
  3. 动画事件曲线函数:animation-timing-function:
  4. 动画开始延迟:animation-delay:
  5. 动画播放次数:animation-iteration-count:
  6. 动画播放顺序:animation-direction:
  7. 动画鼠标悬停:animation-play-state:(在hover中使用)

*简写:animation : name duration timing-function delay count direction;

今天做了华为商城的两个小部分,主要考验了我们到今天为止把之前的知识结合起来的用处,综合功能,虽然是一些稍微简单的东西但是还是有提升的加强熟练度。其次我们还做了一个翻卡片的练习,就是将今天学习的使用起来,熟悉知识点的用法,总的来说今天不错,也做了些东西,总是在进步嘛。

标签

评论

this is is footer