当前位置：首页 > CSS

css跳动制作

2026-04-01 08:47:39CSS

CSS跳动动画制作方法

使用CSS的animation属性和@keyframes规则可以轻松创建跳动效果。以下是几种常见的实现方式：

基础跳动动画

.jump {
  animation: bounce 0.5s infinite alternate;
}

@keyframes bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-20px);
  }
}

弹性跳动效果

css跳动制作

.springy {
  animation: spring 1s infinite cubic-bezier(0.5, 1.8, 0.9, 0.8);
}

@keyframes spring {
  0%, 100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1.1);
  }
}

心跳效果

.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}

应用实例

按钮跳动提示

css跳动制作

<button class="jump-button">点击我</button>

<style>
.jump-button {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 150, 255, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(0, 150, 255, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 150, 255, 0);
  }
}
</style>

加载动画

<div class="loading-dots">
  <span></span>
  <span></span>
  <span></span>
</div>

<style>
.loading-dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  animation: dot-bounce 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dot-bounce {
  0%, 80%, 100% { 
    transform: translateY(0);
  }
  40% {
    transform: translateY(-15px);
  }
}
</style>

高级技巧

使用will-change优化性能

.animated-element {
  will-change: transform;
  animation: bounce 0.8s infinite;
}

结合CSS变量控制动画

:root {
  --jump-height: 30px;
  --jump-duration: 0.6s;
}

.custom-jump {
  animation: var(--jump-duration) infinite alternate custom-bounce;
}

@keyframes custom-bounce {
  to {
    transform: translateY(calc(-1 * var(--jump-height)));
  }
}

这些方法可以根据具体需求进行调整，通过修改动画持续时间、缓动函数和关键帧百分比来创建不同的跳动效果。

标签: css