css3动画充电实例

在现代网页设计中，CSS3 动画已经成为了不可或缺的一部分。在这里我们来看一个有趣的充电实例。

首先，我们需要创建一个 HTML 页面，包括一个按钮和一个电池图标:

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <button id="charge">充电</button>
    <img src="battery.png" alt="电池">
  </body>
</html>

接下来，我们需要编写 CSS 代码来实现动画效果:

img {
  margin-top: 50px;
  margin-left: 100px;
  width: 200px;
}

#charge {
  font-size: 24px;
  padding: 10px 20px;
  margin-top: 20px;
  background-color: blue;
  color: white;
  border: none;
  border-radius: 5px;
}

#charge:hover {
  background-color: darkblue;
}

#charge:active {
  position: relative;
  top: 2px;
}

@keyframes charge {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
    Box-shadow: 0 6px #fff;
  }
  100% {
    transform: translateY(0);
  }
}

img:before {
  content: "";
  display: block;
  position: absolute;
  top: -12px;
  left: 80px;
  width: 40px;
  height: 12px;
  background-color: #333;
  border-radius: 20px;
  animation: charge 1s infinite;
}

解释一下这些代码:

我们使用了 margin-top 和 margin-left 属性将电池图标放置在页面上;
我们使用了 #charge 选择器来设置按钮样式，并添加了 :hover 和 :active 状态;
我们使用了 @keyframes 来创建动画，其中有三个关键帧，分别在 0%、50% 和 100% 的位置;
我们使用了 :before 伪元素来创建充电状态下的矩形，使用 animation 属性来调用我们刚刚创建的 charge 动画。

通过以上代码，我们实现了一个简单的充电动画，点击按钮后，矩形会向上跳动并发出光芒，仿佛正在充电，如下图所示：

充电动画

相关推荐