平面转换

1.位移 translate

技巧:只给一个值是水平移动 单独设置摸个方位移动用 translateX() & translateY()

transform: translate(水平移动, 垂直移动);
<-- 数值跟随父元素移动 -->
transform: translate(100px, 50px);
<-- 百分比跟随子元素移动 -->
transform: translate(100%, 50%);

2.旋转 rotate

注意:角度单位是 deg

技巧:取值正负均可 正顺 逆反

transform: rotate(角度);

3.转换原点 transrorm-origin

取值:

  • 方位名词(left,top等)
  • 像素单位数值
  • 百分比(参考盒子自身尺寸计算)
transform-origin: 原点水平位置 原点垂直位置;

4.缩放 scale

技巧:一般情况下 scale 设置一个值(等比例缩放)

transform: scale(缩放);

拓展:opacity: 0-1; 0透明 1不透明

transform: scale(x轴缩放,y轴缩放);

5.渐变背景

background-image: linear-gradient(
    transparent,
    rgba(0,0,0, .5)
);

6.3d 效果

需要属性:perspective 给父级添加 数值一般在800-1200

transform3d: (X轴,Y轴,Z轴);

7.立体效果

子元素处于真正的 3d 空间

transform-style: preserve-3d;

动画

1.动画效果

目标:使用 animation 添加动画效果

动画效果:实现多个状态间变化过程,动画过程可控(重复播放,最终画面,是否暂停)
1、先定义动画
@keyframes 动画名称 {
    from{}
    to{}
}

百分比表示占动画时间的百分之几

@keyframes 动画名称 {
    % {}
    % {}
    % {}
}
2、在使用动画
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方位 执行完毕时状态;
  • steps (重复次数)
  • infinite 无线循环
  • forwards 动画停留结束的状态
  • linear 正常
  • alternate 动画方位(反)
  • paused 暂停,通常配合 :hover 使用
最后修改:2021 年 10 月 05 日
谢谢老板打赏