css按钮弹跳动画 |css注册页面html模板

.btn {
display: inline-block;
padding: 12px 32px;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
border-radius: 5px;
color: white;
background-color: #007bff;
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px;
transition: all 0.3s ease-out;
animation: bounce 1s ease-out;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-20px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}

让大家来看看上述代码中的每一部分的功能。首先，大家定义了“btn”类的样式。这告诉浏览器大家想要使所有带有“btn”类的按钮使用这些属性。

大家首先定义了一些普通的CSS属性，如文字大小、颜色和背景颜色等。大家还定义了一个动画——bounce即弹跳动画，其属性由百分比所控制，触发时间一秒。这个动画可以让大家的按钮在其本身的垂直方向上弹跳。

大家相信你已经注意到了，大家的按钮会被控制在一个叫做“keyframes”的CSS规则里。这个规则告诉浏览器在时间的不同阶段（百分比）应用哪些CSS属性。在这个例子中，大家有五个步骤。对于每一个步骤，大家告诉浏览器要使用的transform属性的值，它会根据所需来变换按钮在屏幕上展示的位置。

这是一个CSS按钮弹跳动画的示例。可以在你的网站或应用程序中使用这种动画来增加一些品味和交互性。现在，去试试这个按钮吧！