css3动画充电实例（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动画。

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！