【无标题】

一、过渡
1.什么是过滤？
概念：就是指元素从一个状态变为另一个状态的过程。
2.如何实现过渡？
通过transition 属性来指定，它的语法格式为：transition: 过渡属性 持续时间 运动曲线 延迟时间;
3.对于过渡而言，我们可以使用 transition 来简写，也可以把这个属性分开。- transition-property：指定要用于过渡的属性名称，如：width、height、background、…- transition-duration：过渡持续时间，单位是秒。- transition-timing-function：过渡的的运行曲线，默认是 ease- transition-delay：延迟执行时间，单位为秒
4. 使用需求：当鼠标移到div上时，div变为圆形
5. 注意：添加过渡效果的代码需要放在你想要进行过渡的元素上。简单的说，就是希望那个元素有过渡效果就把代码加到那个元素上。6. 如果希望元素的多个属性都具有过渡的效果，那么我们就可以把过渡属性的值设置为 all 即可。
7.运动曲线有哪些？

• ease：默认值，逐渐慢下来- linear：匀速运动- ease-in：加速- ease-out：减速- ease-in-out：先加速后减速
  二、实现进度条效果
  实现方法：
  .bar {
  width: 0%;
  height: 100%;
  background-color: red;
  border-radius: 5px;
  transition: width 1s ease-out;
  }
  .box:hover .bar {
  width: 90%;
  }
  三、 转换之移动
  在CSS3中提交了元素转换的操作功能，通过使用 transform 来实现，可以实现元素的位移、旋转和缩放。
• 位移：transform: translate()
• 旋转：transform: rotate()
• 缩放：transform: scale()
  位移：使用 translate() 来进行指定，它需要通过 x坐标和 y坐标来确定移动的位置。
  语法格式有：
  transform: translate(x, y); // 在x坐标和 y坐标上移动
  transform: translateX(n); // 只在x坐标上移动
  transform: translateY(n); // 只在y坐标上移动
  注意：
  1.当使用translate(x, y)时，x和y都可以指定正值或负值
  如果x的值是正值，则往右移动，负值往左移动
  如果y的值是正值，则往下移动，负值往上移动。
  2.x和y轴的值要带单位，一般使用像素（px）
  四、 转换之旋转
  在CSS3中提交了元素转换的操作功能，通过使用 transform 来实现，可以实现元素的位移、旋转和缩放。
• 位移：transform: translate()
• 旋转：transform: rotate()
• 缩放：transform: scale()

位移：使用 translate() 来进行指定，它需要通过 x坐标和 y坐标来确定移动的位置。
语法格式有：
transform: translate(x, y); // 在x坐标和 y坐标上移动
transform: translateX(n); // 只在x坐标上移动
transform: translateY(n); // 只在y坐标上移动
注意：
1.当使用translate(x, y)时，x和y都可以指定正值或负值
如果x的值是正值，则往右移动，负值往左移动
如果y的值是正值，则往下移动，负值往上移动。
2.x和y轴的值要带单位，一般使用像素（px）
四.转换之旋转
在CSS3中还提供了元素旋转的功能，通过使用 rotate() 来实现，进行旋转时需要指定旋转的角度。
而所使用的角度的单位是 deg
语法格式为：
transform: rotate(数字deg);
使用示例：把div 旋转45度
注意：默认情况下旋转是以元素的中心位置为旋转点来旋转的。如果想指定旋转的中心
点的位置，可以使用 transform-origin: x,y 来指定。
示范：

缩放使用transform:scale() 来实现，语法格式为:

transform: scale(x,y ,
它有以下几种书写方式:
_ transform:scale(1,1) :宽和高都放大一倍，相对于没有放大
transform: scale(2,2)宽和高都放大了2倍
_ transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
transform:scale(0.5,0.5):缩小
x和y的取值说明:
如果值为1表示不放大也不缩小
如果值大于1表示放大
如果值小于1表示缩小
x和y的值是原大小的位数。
通过改变长宽高大小等方法。能做出我们想要的图形和效果。