css 常用动画效果

天天向上10242023-12-01 23:36

css 常用动画效果

文章目录

[css 常用动画效果](#css 常用动画效果)
- 1.上下运动动画
- 2.宽度变化动画

1.上下运动动画

html 复制代码

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

css 复制代码

.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.宽度变化动画

css 复制代码

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