雪花飘，购物抛物线，进度条等四个案列，带入走进 CSS transition

CSS 中的 transition 属性用于设置元素的样式过渡效果。以下是实现“雪花飘，购物抛物线，进度条等”四个案列的基本示例代码：

1. 雪花飘：

HTML:

<div class="snow"></div>

CSS:

.snow {
  width: 10px;
  height: 10px;
  background-color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  transform: translateX(0);
  transition: transform 5s ease-in-out;
}
 
@keyframes snowFall {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
 
@keyframes snowSpiral {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(2); }
}
 
.snow:hover {
  animation: snowFall 5s infinite, snowSpiral 5s infinite;
}

2. 购物抛物线：

HTML:

<div class="shopping-cart"></div>

CSS:

.shopping-cart {
  width: 50px;
  height: 100px;
  background-color: red;
  position: fixed;
  bottom: 0;
  right: 0;
  transform: translateX(0);
  transition: transform 5s ease-in-out;
}
 
.shopping-cart:hover {
  animation: shoppingCartTrajectory 5s infinite;
}
 
@keyframes shoppingCartTrajectory {
  0% { transform: translateX(0); }
  50% { transform: translateX(-50px) translateY(-50px) rotate(20deg); }
  100% { transform: translateX(-100px) translateY(-100px) rotate(40deg); }
}

3. 进度条：

HTML:

<div class="progress-bar"></div>

CSS:

.progress-bar {
  width: 100%;
  height: 10px;
  background-color: blue;
  transition: width 5s ease-in-out;
}
 
.progress-bar:hover {
  width: 0;
}

这些示例展示了如何使用 CSS transition 属性来创建简单的动画效果。每个案列都包括了一个 HTML 元素和相应的 CSS 样式，其中包括了 transition 属性。鼠标悬停时触发动画效果。