学习日志

今天学习了css hack,转换，过渡，动画，css优化，css初始化。

一、css hack:

1. 由于不同浏览器对css的解析认识不同，会导致一份css在不同浏览器生成的页面下有所不同，我们可以在样式前添加前缀，浏览器会自动解析符合自己的内核前缀代码。编写这种代码的过程，就叫做编写css 。hack。
2. css3 浏览器 hack

二、转换：

1. 转换：改变元素在页面中的位置，大小，角度，以及形状即为转换。

2. 转换分类： a、2D转换：平面；

   ​ b、3D转换：空间；

3. transform：a、2D转换取值：位移（translate()）、缩放（scale()）、旋转（rotate(n deg)）、倾斜（skew()）

   ​ b、3D转换取值：透视距离（perspective）、3D旋转（rotate3D(1,1,1,45deg)）、3D位移 （translate3D(100px,100px,200px)）、3D缩放（scale3D(.5,.4,.8)）

4. transform-style：嵌套元素在3D空间显示。

5. 转换原点：a、transform-origin；

   ​ b、取值个数；

三、过渡：

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

2. transition属性：a、transition-property：检索或设置对象中的参与过渡的属性。

   ​ b、transition-duration：检索或设置对象过渡的持续时间。

   ​ c、transition-timing-function：检索或设置对象中过渡的动画类型(过渡时间曲线函数)。

   ​ d、transition-delay：检索或设置对象延迟过渡的时间。

   ​

四、动画：

1. 动画：将多个过渡放在一起，使用关键帧来控制动画的每一个状态，使得元素从一种样式逐渐变化为另一种样式。

2. 关键帧：动画执行的时间节点，一个动画至少2个关键帧。

3. 声明动画：

   ​ @keyframes 名称

   {
   0%{ /代码样式/ }
   50%{ /代码样式/ }
   100%{ /代码样式/ }
   }

4. 使用动画：使用的动画名称；设置动画执行时间、设置动画的时间曲线函数、设置动画开始时的延迟时间、设置动画的播放次数、设置动画的播放顺序、设置动画在播放之前，和播放之后的状态、鼠标悬停，动画暂停；动画的兼容性；简写动画。

五、css优化：

1. css优化的目的：a、减少服务器端的压力(负载均衡、并发、抗压测试)；

   ​ b、缩短服务器响应时间；

   ​ c、提升用户体验；

2. 优化原则：a、尽量减少HTTP的请求个数；

   ​ b、将css和js文件放到外部独立文件中，在页面的顶部，引入css文件；

​ 3.代码优化

六、css初始化：

1. css reset
2. normalize.css

​ 今天练习了华为官网的一些小部分的实现，还有一部分动画效果的实现。这一周要把华为官网的首页做出来，这对我来说是个挑战，加油。