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://www.csdahua.cn/qtweb/news48/382748.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网