2020-11-17

精灵图

1. 精灵图
   
   下边的QQ。。微信就是一个精灵图。
   代码格式如下：

`<style>
    body{
      background-color: #000000;
    }
    .box{
      width: 40px;
      height: 40px;
      margin: 100px auto;
      border: 1px solid;
      /* background-color: red; */
      background-image: url("../img/wb.png");
      background-position: -392px -81px;

    }
  </style>`

background-position: -392px -81px;
这个位置就是这个精灵图的坐标位置。

过渡

功能：实现元素不同状态之间的平滑过渡。
之前：元素->hover状态 直接切换，从开始状态到结束状态，瞬间完成，中间过程几乎无法查看。
格式：
transition：过渡的属性 完成时间（s） 运动曲线 延迟时间
数值型的属性才可以设置过渡。（ width,height,color,font-size）

transition-property 过渡属性：发生变化时，想要有过渡效果的属性。all，全属性。
transition-duration 完成时间：单位是s/ms。
transition-timing-function 运动曲线：
linear 匀速
ease 减速
ease-in 加速
ease-in-out 先加速后减速

transition-delay 延迟时间：单位是s 默认为0 过渡多久后生效。 从结束状态返回到开始状态时，也会生效。
代码样式如下：

<style>
    .box{
      width: 200px;
      height: 200px;
      background-color: rosybrown;
      /* transition: all 2s ease-in 1s; */
      transition-property: all;
      transition-duration: 2s;
      transition-timing-function: ease-in;
      transition-delay: 1s;
    }
    .box:hover{
      width: 800px;
      background-color: royalblue;
    }
  </style>

3.2D转换缩放

格式：
transform:scale(水平方向的缩放倍数,垂直方向的缩放倍数)
取值：大于1表示放大，小于1缩小。

4.2D位移

格式：
transform:translate(水平偏移量，垂直偏移量)
参数：
正值：向右和向下 负值：反方向。
百分比。盒子本身的宽高*百分比

5.绝对定位居中

 <style>
    .father{
      width: 600px;
      height: 600px;
      position: relative;
      background-color: seagreen;
      margin: 100px auto;
    }
    .son{
      width: 200px;
      height: 200px;
      position: absolute;
      left: 50%;
      top: 50%;
      background-color: steelblue;
      /* margin-left: -100px;
      margin-top: -100px; */
      transform: translate(-50%,-50%);
    }
  </style>

先设置绝对定位，然后transform:translate后跟数值或者百分比来进行定位。

6.倾斜

transform:skew(水平倾斜角度，垂直倾斜角度)
单位：deg 角度
正值：是往顺时针走，负值：是往逆时针走。

 <style>
    .box{
      width: 484px;
      height: 300px;
      margin: 100px auto;
      background: url("../img/zwz.jpg");
    }
    .box:hover{
      transform: skew(0,10deg);
    }
  </style>

这个代码块，就是水平0度，垂直向下10度。

7.旋转

设置旋转的中心点
属性值：px 英文（left center right top bottom） 百分比
百分比是按照自身宽高*百分比计算的。
只写一个值，第二值默认为center。

<style>
    .box{
      width: 350px;
      height: 350px;
      margin: 100px auto;
      background-image: url("../img/hb.png");
      /* border-radius: 50%; */
      transition: all 3s;
      /* 
     */
      transform-origin: 10%;
    }
 
    .box:hover{
      
      transform: rotate(45deg);

    }

/* 让盒子进行旋转
格式：
transform: rotate(角度);
单位：deg 正值为顺时针，负值为逆时针。

transform 可以书写多个2D转换，中间用空格隔开。

当rotate和translate在一起的时候，注意书写顺序。
rotate在前，先旋转自身，再按照旋转的角度，进行位移。
translate在前，先进行位移，再旋转自身。
 */

8.3D转换/旋转

perspective: 110px;
透视：加给变换盒子的父盒子
设置的用户的眼睛与平面的距离。
透视只是视觉上的呈现，不是真正的3D。

```css
 <style>
    .box{
      width: 500px;
      height: 500px;
      margin: 100px auto;
     
      perspective: 110px;
    }
    img{
      width: 500px;
      transition: all 2s;
    }
    .box:hover img{
      transform: rotate3d(0.5,0,0,130deg);
      /* transform: rotateZ(45deg); */
    }

  </style>

transform: rotateX(45deg)；绕X轴旋转45°
transform: rotateY(45deg)；绕Y轴旋转45°
transform: rotateZ(45deg)；绕Z轴旋转45°