html5+css3 学习笔记二（菜鸡详细入门笔记）

html5+css3 学习笔记二

一、2D转换

• 2D 转换是改变块级标签在二维平面上的位置和形状

• 移动： translate

• 旋转： rotate

• 缩放： scale

1.translate

改变块级标签的位置

语法：

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

代码演示：

/* 水平垂直移动 100px */
  /* transform: translate(100px, 100px); */

  /* 水平移动 100px */
  /* transform: translate(100px, 0) */

  /* 垂直移动 100px */
  /* transform: translate(0, 100px) */

  /* 水平移动 100px */
  /* transform: translateX(100px); */

  /* 垂直移动 100px */
  transform: translateY(100px)

*注意：只能控制元素在水平和垂直方向上的移动；

​ 移动时不会影响其他元素的位置

​ 如果按照百分比来移动，是相对于元素本身的的宽高来进行计算的

​ 对行内元素是没有效果的

		 **主要用来做让盒子水平 垂直 居中的的效果**

2.rotate

让元素在二维平面内顺时针或者逆时针旋转一定的角度

语法：

​ transform: rotate(ndeg) ；

代码演示：

transform: rotate(360deg)
/*旋转360°*/

*注意 ： n 是数字 deg是单位 度 ；

​ n为正时，顺时针，n为负时，逆时针；

​ 可以配合transition 过渡 属性 做到动态图片的效果

3.transform-origin

改变元素旋转时的中心点

基础语法：

transform-origin: x y;

代码演示：

/*百分比设置 默认旋转中心点为 50% 50%*/
transform-origin: 20% 30%;
/*像素设置*/
transform-origin: 20px 30px;
/*方位名词设置   例如：左下角*/
transform-origin: left bottom;

4.scale

控制元素的等比缩放

语法：

​ transform：scale(x,y);

​ transform：scale(x);

代码演示：

/* 注意，数字是倍数的含义，所以不需要加单位 */
	   /* transform: scale(2, 2) */
   
	   /* 实现等比缩放，同时修改宽与高 */
	   /* transform: scale(2) */
   
	   /* 小于 1 就等于缩放*/
	   transform: scale(0.5, 0.5)

*注意：x控制宽度 y控制高度 ,如果只写一个数字的话，就是宽高等比缩放；

​ 1 相当于不变 2相当于变为原来的两倍 0.5相当于缩小一倍 数字也可以是小数 比如：1.1 1.3 等等；

​ scale最大的优势在于一个盒子的缩放不会影响其他盒子的位置 这是之前学过的技术所做不到的；

​ 可以通过transform-origin 改变盒子放大缩小的中心点

​ 阴影和边框也会相应放大和变小

5.2D转换的综合写法

语法格式：

transform: translate() rotate() scale()；

代码演示：

transform: translate(200px, 0) rotate(360deg) scale(1.2);

*注意： 综合写法的顺序很有讲究，一般来说都会将位移放到最前面，因为其他属性会影响位移的效果，比如 如果旋转写在前面，则会改变盒子坐标轴的方向，位移就会出错。

二、动画(animation)

1、基本概念：

可以通过设置多个关键帧来控制一组动画，并实现复杂的动画效果，要先定义动画，然后再调用定义好的动画。

基本语法格式：

定义动画

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

使用动画：

div {
	/* 调用动画 */
    animation-name: 动画名称;
 	/* 持续时间 */
 	animation-duration: 持续时间;
}

代码演示：

<style>
    div {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      animation-name: move;
      animation-duration: 0.5s;
    }

    @keyframes move{
      0% {
        transform: translate(0px)
      }
      100% {
        transform: translate(500px, 0)
      }
    }
  </style>

*注意：0%是动画的开始，100 % 是动画的完成，其中可以设置阶段性变化，例如 25% 50% 75% 等 等，但设置的百分比数值必须是整数。

​ 设置百分比数值的大小，表示占用总变化时间的多少；

​ 在 @keyframs 中可以规定改变任意多的样式任意多的次数；

​ 除了用百分比来规定变化发生的时间，也可以用 from 和 to，等同于 0% 和 100%；

2、动画的常见属性

animation-name ---- 规定@keyframs动画的名称（必写）；

animation-duration ----规定动画完成一个周期所需要的时间，默认为0s也可以是毫秒（必写）；

animation-timing-function ---- 规定动画的速度曲线，默认为“ease” 即 慢快慢 其他：linear即匀速 ease-in即慢匀 ease-out即匀慢 ease-in-out即慢匀慢 还可是steps(n) n指定了分几步进行动画，每走一步会停顿一下，一般用来做人物的连续动作。

animation-delay ---- 规定动画何时开始，默认为0s，即页面加载完成就开始；

animation-iteration-count ---- 规定动画播放的次数，默认为1，可以是任意正整数或者循环播放是 infinite；

animation-direction —规定动画在本周期结束时，是立即返回起始位置，还是慢慢逆向播放回去，默认值为“normal”即立即返回起始位置，逆向播放回去是“altermate”。

animation-play-state ---- 规定动画运行还是暂停，默认值为“running”即运行，暂停为“paused”，这条属性 一般与伪类选择器结合使用，例如： div:hover {animation-play-state:paused;} 即鼠标指上去暂停运动。

animation-fill-mode – -- 规定动画结束后，是回到起始位置“backwards”还是停留在终点“forwards”。与animation-direction属性和animation-iteration-count属性会有一定的冲突。

代码演示：

div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  /* 动画名称 */
  animation-name: move;
  /* 动画花费时长 */
  animation-duration: 2s;
  /* 动画速度曲线 */
  animation-timing-function: ease-in-out;
  /* 动画等待多长时间执行 */
  animation-delay: 2s;
  /* 规定动画播放次数 infinite: 无限循环 */
  animation-iteration-count: infinite;
  /* 是否逆行播放 */
  animation-direction: alternate;
  /* 动画结束之后的状态 */
  animation-fill-mode: forwards;
}

div:hover {
  /* 规定动画是否暂停或者播放 */
  animation-play-state: paused;
}
/* 简写animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 
animation: name duration timing-function delay iteration-count direction fill-mode;*/
animation: move 2s linear 1s infinite alternate forwards;

*注意：简写属性里不包括animation-play-state，他一般与鼠标事件结合使用

​ 写到要执行动画的盒子里

		调用多个动画时，只能写一个animation  只需要在两个动画之间加一个 , 就可以；例如：animation: move 2s linear 1s infinite alternate forwards,bear 2s linear ;

​

​