8.18 冯娜

学习日志

今天学习了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

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

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1