HTML5+CSS3学习笔记第九天-CSDN博客

本文链接：https://blog.csdn.net/weixin_72043867/article/details/141270820

web页面动态效果

1.平面转换（一般和过渡配合使用）

改变盒子在平面内的形态（位移、旋转、缩放、倾斜）

<style>
    div{
      margin-top: 50px;
      width: 100px;
      height: 100px;
      background-color: pink;
      transition: all 1s;
    }
    div:hover{
      /*平移、旋转、放大、倾斜*/
      transform: translate(800px) rotate(360deg) 
                 scale(2) skew(180deg);
    }
  </style>

平移——transform : translate(x轴移动距离，Y轴移动距离)

（右下为正方向，左上为负方向）

属性值：px|百分比（参照盒子自身尺寸）|正负值都可

注意：translate()只写一个值，表示沿着x轴移动

单独设置X或Y轴移动距离：translateX()或translateY()

平移实现定位居中
- 方法一：先移到中间，再计算盒子宽高的一半向上向左移动
```
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
width:200px;
height:100px;
```
- 方法二：不用计算盒子宽高，使用平移百分比的方式移动
```
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
```
旋转——transform : rotate(度数deg)
改变转换原点——transform-origin:水平原点位置垂直原点位置

位置取值：
- 方位名词（left、top、right、bottom、center）
- 像素单位取值
- 百分比
多重转换——transform: translate rotate scale skew
- 以第一种转换形态的坐标轴为准，所以要想边平移边旋转就要将平移放到旋转前面，否则旋转会改变坐标轴方向；
缩放

transform : scale(倍数)|transform : scale(x轴缩放倍数，Y轴缩放倍数)
倾斜——transform : skew(度数deg)
渐变
- 线性渐变——background-image:linear-gradient ( 渐变方向：to+方位词|角度[默认从上到下]，
  
  颜色1 终点位置，
  
  颜色2 终点位置，
  
  …);
- 径向渐变——由中间向外变化（通常给按钮添加高光效果）
  
  background-image:radial-gradient ( 半径[可以写两条] at 圆心位置,
  
  颜色1 终点位置，
  
  颜色2 终点位置,
  
  …);

2.空间转换

空间：由XYZ三条坐标轴构成例题空间，前、右、下为真正方向。
平移：transform : translate3d ( x , y , z ) | translateX | translateY |translateZ

（由于电脑是平面，默认情况下无法观察到Z轴的移动效果）

解决无法观察到Z轴移动距离的问题：

视距perspective——指定观察者与z=0平面的距离，为元素添加透视效果（近大远小）

perspective: 视距;（取值范围通常为800-1200）——要添加给直接父级
旋转：transform : rotateZ(值) | rotateX|rotateY(正值旋转方向遵循左手法则，给父级增加perspective视距)
立体呈现 : tranform-style——设置元素的子元素是位于3D空间还是平面
- flat :子级处于平面
- perserve-3d : 子级处于3D空间
缩放：transform : scale3d (x,y,z) |scaleX|scaleY|scaleZ

3.动画——animation

*与过渡的区别：可以实现多个状态之间的变化过程，并且可控重复播放，是否暂停，最终画面等

实现步骤：

1.定义动画

两个状态：

@keyframs 动画名称 {

from {}

to{}

}

多个状态：百分比表示动画时长的百分比

@keyframs 动画名称{
0%{}
10%{}
…
100%{}
}
2.使用动画：(属性值不分先后)

animation : 动画名称动画花费时长速度曲线(linear匀速|steps(数字)分步) 延迟时间重复次数(infinite无限循环) 动画方向(alternate反向) 执行完毕时状态（forwards停到结束状态);

*拆分属性：

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwards:最后一帧状态 backwards:第一帧状态
animation-timing-function	速度曲线	steps(数字)：逐帧动画
animation-iteration-count	重复次数	infinite为无限循环
animation-direction	动画执行方向	alternate为反方向
animation-play-state	暂停动画	paused为暂停，通常配合:hover使用

 <style>
    .box{
      width: 200px;
      height: 100px;
      background-color: pink;
      animation: change 1s; 
    }
    /* 动画一：宽度从200变成800 */
    @keyframes change{
      from{
        width: 200px;
      }
      to {
        width: 800px;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>