/** 匹配文档树的根元素 */
:root {
  --bg-color: #f0f8ff;
  --text-color: #333;
}

/** 给要适配深色模式的元素动态添加上这个`class`，因为`css`的就近选择原理，所以这里面的属性生效 */
.dark-mode {
  --bg-color: #121212;
  --text-color: #f0f0f0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* 正确写法：持续时间在前，延迟时间在后 */
transition: transform 2s 0.5s ease-in-out;

/* 错误写法：持续时间和延迟时间顺序颠倒 */
transition: transform 0.5s 2s ease-in-out; /* 会导致延迟2秒，持续0.5秒 */

/* 正确：transform组在前，background-color组在后 */
transition: transform 2s ease-in-out, background-color 1s linear;

/* 等效：交换两组的顺序 */
transition: background-color 1s linear, transform 2s ease-in-out;

/* 所有属性共用2秒持续时间和ease缓动 */
transition: all 2s;

/* 等价于 */
transition: 
  width 2s ease, 
  height 2s ease, 
  background-color 2s ease, 
  transform 2s ease;

/* 写法1：transform组在前 */
transition: 
  transform 2s ease-in-out, 
  background-color 1s linear, 
  opacity 0.5s 0.2s cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* 写法2：opacity组在前 */
transition: 
  opacity 0.5s 0.2s cubic-bezier(0.1, 0.7, 1.0, 0.1), 
  background-color 1s linear, 
  transform 2s ease-in-out;

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

/* 等价于 */
@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.box {
  animation: 
    pulse 2s ease-in-out 0.5s infinite alternate, /* 主动画 */
    fadeIn 1s forwards; /* 辅助动画 */
}

@keyframes pulse {
  0% { transform: scale(1); background: red; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); background: blue; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 定义一个旋转并变色的动画 */
@keyframes spinAndChangeColor {
  0% { transform: rotate(0deg); background-color: red; }
  50% { transform: rotate(180deg); background-color: green; }
  100% { transform: rotate(360deg); background-color: blue; }
}

/* 应用动画 */
.element {
  animation: 
    spinAndChangeColor /* 名称 */
    3s /* 时长 */
    linear /* 匀速 */
    1s /* 延迟1秒 */
    infinite /* 无限循环 */
    alternate /* 交替方向 */
    forwards /* 保持最终状态 */;
}

@keyframes 动画名称 {
  时间点 {
    CSS属性: 值;
    /* 其他属性... */
  }
  时间点 {
    CSS属性: 值;
    /* 其他属性... */
  }
}

@keyframes slide {
  0% { transform: translateX(0); opacity: 0; }
  50% { transform: translateX(50px); opacity: 0.8; }
  100% { transform: translateX(100px); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes moveAndChange {
  0% { 
    transform: translate(0, 0); 
    background-color: red;
  }
  100% { 
    transform: translate(100px, 50px); 
    background-color: blue;
  }
}

@keyframes complex {
  0% { transform: scale(1); opacity: 0; }
  50% { opacity: 0.5; } /* 保持scale(1)，仅修改opacity */
  100% { transform: scale(2); opacity: 1; }
}

@keyframes invalid {
  0% { color: red !important; } /* 无效 */
}

.element {
  animation: 
    slide /* 对应@keyframes名称 */
    3s /* 持续时间 */
    ease-in-out /* 缓动函数 */
    infinite /* 无限循环 */
    alternate; /* 交替播放 */
}

.element1 {
  animation: slide 2s; /* 2秒完成动画 */
}

.element2 {
  animation: slide 4s 1s; /* 4秒完成，延迟1秒 */
}

.element {
  animation: 
    fadeIn 1s,
    slide 2s 0.5s; /* 第二个动画延迟0.5秒 */
}

.element {
  animation: slide 2s reverse;
  /* 实际执行: 100% → 0% */
}

/* 定义弹跳动画 */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

/* 应用到元素 */
.ball {
  animation: bounce 2s infinite;
}

@-webkit-keyframes slide { /* Safari 4+ */
  from { -webkit-transform: translateX(0); }
  to { -webkit-transform: translateX(100px); }
}

@keyframes slide { /* 标准语法 */
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

::-webkit-scrollbar // 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button // 滚动条两端的按钮
::-webkit-scrollbar-track // 外层轨道
::-webkit-scrollbar-track-piece // 内层滚动槽
::-webkit-scrollbar-thumb // 滚动的滑块
::-webkit-scrollbar-corner // 边角
::-webkit-resizer // 定义右下角拖动块的样式

/* Firefox */
* {
  /* 滚动条宽度（可选值：thin/auto/none）*/
  scrollbar-width: thin; 
  /* 滚动条颜色（滑块、轨道） */
  scrollbar-color: #888 #f1f1f1;
}

/* WebKit 浏览器 */
/* 整体滚动条宽度 */
::-webkit-scrollbar {
  width: 8px; /* 垂直滚动条宽度 */
  height: 8px; /* 水平滚动条高度 */
  display: none; /* 隐藏 */
}

/* 轨道（背景）样式 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道颜色 */
  border-radius: 4px;
}

/* 滑块（拖动块）样式 */
::-webkit-scrollbar-thumb {
  background: #888; /* 滑块颜色 */
  border-radius: 4px;
}

/* 悬停效果 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 悬停颜色 */
}

button {
  user-select: none;
}