css

qfstudy
393 阅读5分钟

CSS

一、CSS变形，过渡和动画

CSS变形，过渡和动画

1.变形:transform

  • 1.1旋转:rotate
  • transform:ratate(180deg);
  • 1.2:缩放:scale
  • transform:scale(2) ps:0会让元素从页面中消失。放大的时候如果空 间不够则会叠加到其他元素上
  • transform:scale(0.5,2);分别为横向和纵向缩放
  • transform:scaleY(2)
  • transform:scaleX(2) 缩放还可以上下对调和前后对调效果
  • transform:scale(-1)：实现上下左右对调
  • transform:scale(-1,1):实现横轴翻转
  • 1.3平移:translate
  • transform:translate(1px,2px)：横向和纵向
  • transform:translateX(-0.5em)
  • transform:translateY(2em)
  • 1.4倾斜:skew
  • transform:skew(45deg,0):向左倾斜45度，逆时针旋转
  • transform:skew(0，45deg)
  • transform:skew(45deg,45deg)
  • skewX和skewY
  • 1.5多重变形
    • transform:rotate(45deg) scale(5) translate(400px,500px) skew(45deg,0deg);
  • 1.6原点
  • 默认元素中心为变形原点
  • transform-origin可以修改元素变形原点
  • transform-origin:left top;和transform-origin:0 0和transform-origin:0% 0%;是等价的是左上角为原点
  • 右下角：transform-origin:right bottom;\transform-oringin:100% 100%
  • transform-origin属性对只使用translate函数移动的元素没有效果。

2过渡:transition

  • 2.1
    • IE10之前版本不支持transition
    • 实现过渡效果，要满足以下几个条件
    1. 两个样式。一个样式表示过渡前的外观，另一个样式表示过渡后的外观。
    2. transition属性。CSS提供的transition属性，一般情况下，transition属性要添加到初始样式中
    3. 触发器。触发器是指促使元素在两个样式之间变化的操作
  • 2.2添加过渡效果
  • transition-property:指定要以动画显示的属性 
    • transition-property:all
  • transition-duration:指定动画持续多长时间
  • transition-timing-function:控制动画的速率
    • linear：匀速
    • ease：开始很慢中间加速最后有降速
    • ease-in
    • ease-out
    • ease-in-out
    • cubic-bezier
  • transition-delay:延迟开始过渡
  • 过渡属性的简写形式：transition:all 1s ease-in .5s;顺序是属性、持续时间、属性函数和延迟
    • transition:all 1s;

3动画

  • 3.1

    • IE10之前版本不支持动画
    • 关键帧：指展示画面的一帧
    • 创建动画的过程分成以下两步：
      1. 定义动画：设置关键帧，列出要变化的CSS属性。
      2. 把动画应用到元素上：定义好动画后，可以把动画应用到页面中的任意元素上。而且可以分别为每个元素设置时序、延迟和其他动画属性。
    • 定义关键帧
    1. animation
    • animation-duration
    • animation-timing-function(linear、ease、ease-in、ease-out、ease-in-out)-
    • animation-name
    • animation-delay
    • animation-iteration-count(动画运行次数：10、infinite(无数次)等)
    • animation-direction:alternate;(让动画在奇偶次数分别正向和反向播放)
    • animation-fill-mode:forwards;(让元素显示动画结束后的样式)
    • animation-play-state:pause(暂停)/running(执行)

二、web布局新方法:弹性盒(flexbox)

1. 弹性容器

  • 任何html元素都可以做弹性容器，弹性容器里的标签是弹性盒模型的一部分

2. 弹性项目

  • 直接嵌套在弹性容器里的标签交弹性项目。只有弹性容器的子代是弹性项目，如果把一个<div>标签设为容器，然后里面放一个无需列表，那么只有<ul>标签是弹性项目<ul>标签里的<li>标签则不是。

  • 参考阮一峰的教程：Flex 布局教程：语法篇

3. 属性

3.1 flex-flow 属性

  • flex:1各项目宽度相等
  • flex-flow有两个值，第一个值指明方向。第二个值指明是否换行。
  • 方向有四个可选值
  1. row(默认值)，并排显示
  2. row-reverse，并排显示，顺序跟row相反
  3. column,纵向叠放
  4. column-reverse,
  • 第二个值有三个可选值
    1. nowrap:不换行
    2. wrap换行
    3. wrap-reverse
  • flex-flow是flex-direction和flex-wrap的简写形式。
  • flex-flow:row wrap; 等价: flex-direction:row;flex-wrap:wrap;

3.2 justify-content 属性
这个属性告诉浏览器把弹性项目显示在一行里的位置，只有弹性项目设置了宽度，而且各个项目的宽度之和小于弹性容器的宽度时才起作用。

  • 五个可选值
  • flex-start项目在一行里靠左对齐。如果把分析设为row-reverse，项目会靠右对齐。
  • flex-end 项目在一行里靠右对齐。如果把分析设为row-reverse，项目会靠左对齐。 center居中显示 space-between均布各个弹性项目，项目之间的空间大小相同，最左边的项目靠容器的左边，最右边的项目靠容器右边 space-around把容器里剩余的空间平均分布给各个项目。

3.3 align-items 属性 决定高度不同的项目在容器里的纵向对齐方式，默认情况下，弹性项目会拉伸，因此高度都相同

  • flex-start各个项目的顶边与容器的顶边对齐 -flex-end各个项目的底边与容器的底边对齐
  • center各个项目的纵向中心线与容器的纵向中心线对齐
  • baseline把各个弹性项目里第一个元素的基线对齐
  • stretch 项目常规纵向对齐方式，拉伸容器里的各个项目，使各个项目的高度相同。

3.4 align-content 属性 告诉浏览器如何放置显示为多行的项目，只有满足两个条件，这个属性才起作用

  1. 容器必须允许换行
  2. 容器的高度必须大于多行显示的弹性项目

align-content支持六个值

  • flex-start把各行弹性项目放在弹性容器的顶部
  • flex-end把各行弹性项目放在容器的底部
  • center把各行整体的纵向中心线与容器的纵向中心线对齐
  • space-between把纵向额外的空间平均分布在各行之间，最上面一行放在容器的顶部，最下面一行放在容器的底部 space-around把空间平均分布到各行的上下，包括最上面一行和最下面一行 stretch拉伸各个项目，让一行里的项目具有相同的高度。
avatar
文章
阅读
粉丝