css 常用动画效果

原创已于 2023-11-24 17:42:09 修改 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2023-11-24 17:39:23 首次发布

Web前端专栏收录该内容

226 篇文章

订阅专栏

本文介绍了CSS中两种常见的动画效果：1)上下移动的item元素，使用了`move-up-and-down`关键帧动画；2)div元素的宽度变化，通过`:hover`伪类和`transition`实现平滑过渡。

css 常用动画效果

文章目录

css 常用动画效果
- 1.上下运动动画
- 2.宽度变化动画

1.上下运动动画

 <div class="box">
  <div class="item"></div>
</div>

.box {
  position: relative;
}

.item {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  top: 18px;
  animation: move-up-and-down 2s linear infinite;
}

@keyframes move-up-and-down {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

2.宽度变化动画

div {
  width: 50px; 
  height: 20px; 
  background-color: #ccc; 
  transition: width 1s; /* 宽度变化效果，过渡时间为1秒 */
}
div:hover {
  width: 200px; /* 鼠标悬停时的宽度 */
}