CSS动画：用HTML+CSS动画实现波纹效果和奔跑的大熊

2023-10-26 23:57:15

CSS动画简介
CSS动画是一种用于在网页上创建动画效果的技术。它允许您创建动画，而无需使用图像或JavaScript。CSS动画使用关键帧（keyframe）来定义动画的起始状态和结束状态。关键帧之间的过渡是平滑的，因此动画看起来很自然。

HTML+CSS实现波纹效果

波纹效果是一种常见的动画效果，它经常用于按钮和链接。要使用HTML+CSS来实现波纹效果，您可以使用以下步骤：

创建一个HTML元素，例如<div>或<span>, 并为其添加一个类名。
在CSS文件中，为这个类名添加以下样式：

.波纹效果 {
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.波纹效果::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
}

.波纹效果:hover::before {
  animation: ripple 1s linear infinite;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

当您将鼠标悬停在元素上时，波纹效果就会出现。

HTML+CSS实现奔跑的大熊

奔跑的大熊是一种有趣的动画效果，它经常用于游戏和卡通。要使用HTML+CSS来实现奔跑的大熊，您可以使用以下步骤：

创建一个HTML元素，例如<div>或<span>, 并为其添加一个类名。
在CSS文件中，为这个类名添加以下样式：

.奔跑的大熊 {
  position: relative;
  width: 100px;
  height: 100px;
}

.奔跑的大熊::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 50%;
  animation: run 1s linear infinite;
}

@keyframes run {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}