效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<img src="buy.png" class="imgDemo">
</body>
<style>
@keyframes scaleDraw {/*scaleDraw是关键帧名称*/
0% {
transform:scale(1);/* 0%:原始大小 */
}
25% {
transform:scale(1.1);/* 25%:原始大小*1.1倍 */
}
50% {
transform:scale(1);/* 50%:原始大小 */
}
75% {
transform:scale(1.1);/* 100%:原始大小*1.1倍 */
}
}
.imgDemo {
animation: scaleDraw 2s infinite;/* scaleDraw:动画的名称。 2s:动画时间。 infinite:无限 */
}
</style>
</html>