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：有三种取值方式：
- px单位数字
- %取值
- 关键字如：x：left/center/right y：left/center/right
过渡：
使css的值，在一段时间内平缓变化的效果。过度的代码要写在原本样式中，过渡效果有去有回，如果写在hover中，过渡效果有去无回。
具体过渡的属性有：
- transition-property：过渡属性支持（一般all代表所有属性）
- transition-duration：过度事件（s为单位）
- transition-timing-function：动作方式（ease：默认值，慢开，中快，慢关）默认（liner匀速）常用等。
- transition-delay：过渡时间（s为单位）
*简写：transition : property duration timing-function delay；
动画：
动画：多个过渡用关键帧控制从一种样式变成另一种样式。
关键帧：动画执行节点，至少两个关键帧。
动画的声明：使用@keyframes{
（内容至少两个关键帧：开始和结束） }
具体动画属性：
- 动画名称：animation-neme：
- 动画执行事件；animation-duration：
- 动画事件曲线函数：animation-timing-function：
- 动画开始延迟：animation-delay：
- 动画播放次数：animation-iteration-count：
- 动画播放顺序：animation-direction：
- 动画鼠标悬停：animation-play-state：（在hover中使用）
*简写：animation : name duration timing-function delay count direction；
今天做了华为商城的两个小部分，主要考验了我们到今天为止把之前的知识结合起来的用处，综合功能，虽然是一些稍微简单的东西但是还是有提升的加强熟练度。其次我们还做了一个翻卡片的练习，就是将今天学习的使用起来，熟悉知识点的用法，总的来说今天不错，也做了些东西，总是在进步嘛。
点赞
评论