运用css让漂浮图片左右快速摇摆动起来

要实现一个图片在视窗底部中心左右快速摇摆,并且在每次摇摆结束后有一个短暂的停留,你可以通过调整动画的百分比和速度曲线来实现。
运用css让漂浮图片左右快速摇摆动起来插图

html源码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>图片底部中心快速摇摆并停留</title>

<style>

.swing-image { position: fixed; bottom: 0; /* 定位到视窗底部 */

left: 50%; /* 定位到视窗水平中心 */

transform: translateX(-50%); /* 确保图片中心与视窗底部中心对齐 */

animation: swing 3s ease-in-out infinite; /* 动画持续时间为3秒,包含摇摆和停留 */

transform-origin: bottom center; /* 设置旋转中心为底部中心 */ }

@keyframes swing { 0%, 20% { transform: rotate(0deg); } /* 初始状态,不旋转 */

25% { transform: rotate(20deg); } /* 开始向右摇摆 */

35% { transform: rotate(-20deg); } /* 开始向左摇摆 */

50% { transform: rotate(0deg); } /* 回到初始状态,并短暂停留 */

50.1%, 70% { transform: rotate(0deg); } /* 延长停留时间 */ /* 重复上述摇摆过程 */

75% { transform: rotate(20deg); }

85% { transform: rotate(-20deg); }

100% { transform: rotate(0deg); } }

</style>

</head>

<body>

<img src="your-image-path.jpg" alt="摇摆图片" class="swing-image">

<!-- 其他页面内容 -->

</body>

</html>

以上为完整代码,动作可以更具css数值自己调试使用!