04-交互动效设计

04-交互动效设计

变换

transform 是用于对元素进行 2D/3D 变换 的核心属性，支持平移、旋转、缩放、倾斜等效果，且不破坏原有文档流布局

2D效果（平移、旋转、缩放、倾斜）

• 平移 translate(x,y) translateX(x) translateY(y)

  沿 X/Y轴移动元素，参数可为像素或百分比 (百分比相对于元素自身尺寸)

  示例：transform: translateY(-85px);

• 旋转（2D） rotate(angle)

  以元素中心为基点顺时针旋转，需加单位 deg (负值为逆时针)

  示例：transform: rotate(360deg);

  ​ transform-origin: left top; 设置旋转中心点为左上

  行内元素无法直接做旋转效果，需转换为行内块或块级元素

• 缩放 scale(sx, sy) scaleX(sx) scaleY(sy)

  X/Y轴按比例缩放，单参数时等比例缩放 (>1放大，<1缩小，支持百分比)

  可用transform-origin设置缩放点

• 倾斜 skew(x-angle,y-angle) skewX(angle) skewY(angle)

  沿 X/Y 轴扭曲元素形状，参数为倾斜角度 (支持负值)

  可用transform-origin设置缩放点

transform 属性的复合写法 transform: A()B()C();

​ 核心规则:从右到左的执行顺序

​ 实际的执行顺序是:先执行最右侧的 C()，然后是 B()，最后是左侧的 A()

​ 示例：transform: translateX(600px) rotate(360deg);

3D效果（旋转、透视、背面隐藏）

• 旋转 rotateX(angle) rotateY(angle) rotateZ(angle)

  通过改变元素在3D空间中的角度实现视觉效果

  示例：transform: rotateX(45deg);

  参数单位:deg(度)，正值是顺时针旋转，负值是逆时针旋转

  rotateZ和二维里面的rotate()一样的

• 透视 perspective

  示例：perspective:1000px; （在父盒子添加）

  ​ transform: perspective(1000px)rotateX(45deg); （在子盒子添加）

  • 数值越小，透视效果越强
  • 给父元素添加，里面所有子元素都会添加透视效果 (常用)
  • 给子元素添加，当前元素添加透视效果
  • perspective()必须作为 transform属性的第一个函数(否则无效)

• 背面隐藏

  backface-visibility:hidden;

  控制元素背面的可见性(默认镜像显示)，常用于隐藏背面(如扑克牌翻转效果)

• 3D位移 translateZ() translate3d()

  示例： transform: translate3d(-50%，0，60px);

• 开启3D空间

  transform-style:preserve-3d;

过渡

transition: 过渡属性 持续时间 速度曲线 延迟时间;

示例：transition: all 1s linear 1s;

速度曲线参数：

• ease

  默认值，慢速开始 →加速 →慢速结束，适合大多数自然长渡(如按钮悬停)

• linear

  匀速运动，无加速/减速，适合机械感效果(如进度条)

• ease-in

  慢速开始 →逐渐加速，适合元素从静止启动(如弹窗出现)

• ease-out

  快速开始 →逐渐减速，适合元素退出(如关闭动画)

• ease-in-out

  慢速开始和结束，中间加速，适合对称性动画(如页面切换)

• cubic-bezier(x1,y1,x2,y2)

  贝塞尔曲线。通过四值(0-1范围内)自定义速度曲线实现弹跳、骤停等创意效果(如按钮点击反馈)
  

---

动画

定义动画

使用动画

animation:动画名称 动画时长;

示例：animation:move 1s;

动画属性要写到目标元素里面。

animation属性完整写法

animation: 动画名称 动画时长 速度曲线 延迟时间 播放次数 播放方向 执行完毕状态;

动画名称和动画时长是必写，其余可以省略，但是要保证书写顺序

动画属性要写到目标元素里面

• animation-timing-function（默认值 ease） 动画速度曲线，支持linear、cubic-bezier()等
• animation-delay（默认值 0s） 动画延迟时间，可设为负值(跳过部分动画)
• animation-iteration-count（默认值 1） 播放次数，若需无限循环需显式声明infinite
• animation-direction（默认值 normal） 播放方向，可选reverse(反向)、alternate(交替)
• animation-fill-mode（默认值 none） 执行完毕状态，动画结束后是否保留样式(如 forwards 保留最后一帧)
• animation-play-state（默认值 running） 暂停或者继续动画，需单独设置 paused暂停动画

animation-play-state不可以写到animation里面

steps 逐帧动画

animation:move 1ssteps(8) infinite;

steps(步数)，步数为正整数

经常和背景图片(精灵图)来实现动画效果

steps 逐帧动画

animation:move 1ssteps(8) infinite;

steps(步数)，步数为正整数

经常和背景图片(精灵图)来实现动画效果

动效案例

1. inset: 3px;（拉伸盒子至距上下左右各3px）

   等价于

   top: 3px; left: 3px; right: 3px; bottom: 3px;

2. background-image: conic-gradient(transparent, transparent, transparent, #00ccff);

   使用圆锥渐变创建发光边框效果：前3/4是透明的，最后1/4是蓝色(#00ccff)，形成一个部分发光的边框

3. z-index:-1; 可以被标准流盒子压住

4. has()选择器

   :has()允许你“根据子元素的特征反向选择父元素”也被称为“父选择器”或“存在选择器”

   示例：

.box ul:has(.item:nth-child(1):hover) {
    grid-template-columns: 2fr 1fr 1fr 1fr;
}

5. backdrop-filter 滤镜

   • blur 模糊效果

     示例：backdrop-filter: blur(5px);

   • brightness 亮度调整

     示例：backdrop-filter: brightness(150%); 更亮

   • filter 灰度

     示例：backdrop-filter: grayscale(100%); 完全灰度

   • saturate 饱和度

     示例：backdrop-filter: saturate(200%); 更高饱和度

   • hue-rotate 色相旋转

     示例：backdrop-filter: hue-rotate(90deg); 旋转90度

   • 多重滤镜组合

     示例：backdrop-filter: blur(10px) brightness(80%) saturate(150%);

   6. box-reflect 倒影

      box-reflect: 倒影方向 倒影距离 倒影图像;

   • 倒影方向(必写)：

     • above:倒影在元素上方(顶部)
     • below:倒影在元素下方(底部，最常用)
     • left:倒影在元素左侧
     • right:倒影在元素右侧

   • 倒影距离(必写)：

   • 倒影图像(可选)：

     常用线性渐变(linear-gradient)实现从清晰到透明的过渡，避免倒影边缘生硬

     注意: 因为兼容性问题，前面需要加 -webkit-

   7. :not();否定选择器

      作用是“排除”符合某些条件的元素，让样式作用于剩余元素

      示例：

      box:hover>.item:not(:hover){
          margin:0 -20px;
          transform: perspective(500px)rotateY(45deg)scale(0.95);
      }