资料
原文地址 CSS sprite sheet animations
效果演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>测试</title>
<style>
body {
background-color: #202283;
background-image: linear-gradient(#34369b 1px, transparent 1px),
linear-gradient(90deg, #34369b 1px, transparent 1px),
linear-gradient(#272992 1px, transparent 1px),
linear-gradient(90deg, #272992 1px, #202283 1px);
background-size: 96px 96px, 96px 96px, 12px 12px, 12px 12px;
background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
border-radius: 12px;
}
.element {
background-image: url('./twitter.png');
/* size of one frame */
width: 100px;
height: 100px;
/* size of the whole sheet */
background-size: 2900px 100px;
/* coordinates of the desired frame (negated) */
background-position: 0 0px;
/* animate the coordinates */
}
.element:hover {
animation: heartAnimation 2s steps(29, jump-none) infinite;
}
@keyframes heartAnimation {
from {
/* first frame */
background-position: 0px 0px;
}
to {
/* last frame */
background-position: -2800px 0px;
}
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>
