🌻CSS 高级

type
status
date
slug
summary
tags
category
icon
password
☀️
点击带三角形的标题可以展开收缩内容。

渐变

渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景
  • 线性渐变
  • 径向渐变（圆）

线性渐变

  • 渐变方向：可选
    • to 方位名词
    • 角度度数
  • 终点位置：可选
    • 百分比

径向渐变

  • 半径可以是2条，则为椭圆
  • 圆心位置取值：像素单位数值 / 百分比 / 方位名词

动画

  • 过渡：实现两个状态间的变化过程
  • 动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

定义动画

使用动画

  • 动画名称和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

animation 拆分写法

notion image
example:

精灵动画

  • 准备显示区域
盒子尺寸与一张精灵小图尺寸相同
  • 定义动画
移动背景图（移动距离 = 精灵图宽度）
  • 使用动画
steps(N)，N 与精灵小图个数相同

多重动画

🌻
欢迎在下方留言讨论~
CSS 布局-移动端JavaScript 入门
Loading...
目录