css 常用动画效果

代码工人笔记

已于 2023-11-24 17:42:09 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： css 前端

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

本文链接：https://blog.youkuaiyun.com/zhao3756/article/details/134603838

Web前端专栏收录该内容

172 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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; /* 鼠标悬停时的宽度 */
}