html如何让图片晃动

admin
行业动态
2024-04-03
3599

要让图片晃动，可以使用CSS动画和关键帧，以下是一个简单的示例：

1、在HTML中插入一张图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>图片晃动示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <img src="yourimagesource.jpg" alt="图片" >
</body>
</html>

2、在CSS文件（例如styles.css）中添加以下样式：

.shake {
    display: inlineblock;
    animation: shake 0.5s infinite;
}
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(1px, 2px) rotate(1deg); }
    20% { transform: translate(3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, 1px) rotate(1deg); }
    50% { transform: translate(1px, 2px) rotate(1deg); }
    60% { transform: translate(3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(1deg); }
    80% { transform: translate(1px, 1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, 2px) rotate(1deg); }
}

这个示例中，我们创建了一个名为shake的关键帧动画，它会在0.5秒内完成一次完整的循环，我们将这个动画应用到具有.shake类的元素上，使其在页面加载时开始晃动。

注意：请将yourimagesource.jpg替换为你自己的图片源。