国外主机测评 - 国外VPS，国外服务器，国外云服务器，测评及优惠码
要让图片晃动，可以使用CSS动画和关键帧，以下是一个简单的示例：,1、在HTML中插入一张图片：,2、在CSS文件（例如
styles.css）中添加以下样式：,这个示例中，我们创建了一个名为
shake的关键帧动画，它会在0.5秒内完成一次完整的循环，我们将这个动画应用到具有
.shake类的元素上，使其在页面加载时开始晃动。,注意：请将
yourimagesource.jpg替换为你自己的图片源。,
,<!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=”图片” class=”shake”> </body> </html>,.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); } },
html如何让图片晃动
版权声明：本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称：《html如何让图片晃动》
文章链接：https://zhuji.vsping.com/426903.html
本站资源仅供个人学习交流，请于下载后24小时内删除，不允许用于商业用途，否则法律问题自行承担。
文章名称：《html如何让图片晃动》
文章链接：https://zhuji.vsping.com/426903.html
本站资源仅供个人学习交流，请于下载后24小时内删除，不允许用于商业用途，否则法律问题自行承担。
