css 下载按钮动画 |css3 叮当猫

.button{
background-color: #008CBA;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:after {
content: " ";
background-image: url("download-icon.png");
display: inline-block;
width: 20px;
height: 20px;
margin-left: 10px;
vertical-align: middle;
}
.button:hover:after {
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

在上述代码中，大家首先定义了一个简单的按钮样式，并在其后面添加了一个下载图标，这个图标通过:before伪元素添加到按钮的文本后面，然后定义了一个:hover伪类来控制下载图标的动画效果。

对于:hover伪类，大家定义了一个@-webkit-keyframes和@keyframes来分别实现在webkit内核和其他浏览器中的动画变化。这个动画效果叫做旋转动画，即当按钮被鼠标滑过时，下载图标会无限旋转。

通过添加这个简单的CSS动画，大家就可以轻松地为大家的下载按钮添加更加生动和有趣的效果。