CSS3动效,2D,3D,动画

CSS动效,2D,3D,动画

过渡

定义：CSS 过渡允许您在给定的时间内平滑地改变属性值。过渡效果执行完毕默认会还原。

• transition-property需要过渡效果的属性的名字

• transition-delay过渡等待时间

• transition-duration过渡的时间

• transition-timing-function：控制运动的速率，比如先快后慢或者其他

ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）

linear - 规定从开始到结束具有相同速度的过渡效果

ease-in -规定缓慢开始的过渡效果

ease-out - 规定缓慢结束的过渡效果

ease-in-out - 规定开始和结束较慢的过渡效果

ps:过渡效果只能产生从某一个具体的值到另一个值过渡，不能的状态等css属性

简写以及为多个属性添加过渡效果

transition: left 2s ease 2s,background 2s linear 1s;

2D

定义：通过css3的transform转换，我们能够对元素进行移动，缩放，旋转，斜切等等效果

• translate()

  平移默认一个参数表示x方向，也可以translateX()等

• rotate(a)

通过指定的角度参数对元素根据对象原点指定一个2D旋转

a：表示角度 30deg

ps:在2维中只能围绕z轴旋转，也就是朝向你的轴

• scale()

让元素根据中心原点对对象进行缩放，默认的值为1，小于1的缩小。大于1的变大

scaleX()

scaleY() ps:这些效果都不会影响其他元素

• skew()

斜切

skewX()

skewY()

• matrix()

matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

旋转轴心 transform-origin：

3D

定义：通过css3的transform转换，我们能够对元素进行3d方面的移动，缩放，旋转 等等效果

translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。x表示x轴方向的一个向量
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。n是距离，相当于图形学的相机 perspective-origin：观察

旋转解析

rotate3d(x,y,z,angle) x,y,z都是一个向量参数，旋转之后坐标系的方向会发生改变

如：rorate3d(1,0,0,0)和rorate3d(100,0,0,0)没有任何区别，因为都是围绕着x轴上的一条向量旋转

动画

定义：CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。过渡只能实现两个效果之间过渡的动效，而动画更为灵活

• @keyframes：创建动画的关键字

• animation-name

• animation-duration

• animation-delay

• animation-iteration-count

  动画播放的次数，也可以无限次数值为infinete

• animation-direction

  规定动画是否在下一周期逆向地播放。默认是 “normal”。

  normal	默认值。动画按正常播放。
  reverse	动画反向播放。
  alternate	动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
  alternate-reverse	动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。

• animation-timing-function

• animation-fill-mode

  动画完成后元素的样式和状态

• animation

.a {
  background-color: aliceblue;
  /* transform: translateZ(50px); */
  animation: moveTest 2s;
  animation-iteration-count: 50;
}
@keyframes moveTest {
  0% {
    transform: translateZ(0);
  }
  100% {
    transform: translateZ(50px);
  }
}

• 无限滚动案例

  <header>
      <ul>
        <li class="one"><img src="../assets/6.jpg"></li>
        <li class="one"><img src="../assets/202111921572761327.jpg"></li>
        <li class="one"><img src="../assets/30b6f8e8207b825a!480x480.jpg"></li>
        <li class="one"><img src="../assets/6.jpg"></li>
        <li class="one"><img src="../assets/202111921572761327.jpg"></li>
        <li class="one"><img src="../assets/30b6f8e8207b825a!480x480.jpg"></li>
      </ul>
    </header>
    -------
    header {
    width: 300px;
    overflow: hidden;
  }
  .one {
    display: inline-block;
    width: 100px;
    height: 100px;
  }
  @keyframes move {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-300px);
    }
  }
  ul {
    width: 600px;
    animation-name: move;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    /* animation-direction: alternate; */
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  

Web字体

• 开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。它的支持程度比较好，甚至E低版本浏览器也能支持。

1、TureType(.ttf)格式
.ttf字体是 windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile.
Safari4.2+;
2、OpenType( .otf)格式
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏英器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、fOSMobile.Safari4.2+;
3、web Open Font Format(.woff)格式
woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的刻览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opta11.1+;
4、Embedded Open Type(.eot)格式
.eot字体是E专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+;
5、svG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+Ooera10.0+，iOS Moblle Safari3.2+

• @font-face{
    font-family:'自定义名字'，
    src:url('') format('')
  }
  @font-face {
  font-family: chang;
  src: url('./assets/fonts/仓耳小丸子.ttf');