html如何让图片晃动

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

1、在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替换为你自己的图片源。

分享文章：html如何让图片晃动
标题路径：http://bzwzjz.com/article/dpessse.html