代碼如下（示例）：

<divclass="jumpBox"style="width: 350px; height: 325px"><imgwidth="100%"height="100%"src="XXXXX.png"/></div>

2.css

<style scoped> .jumpBox img{animation: jumpBoxHandler 1.8s infinite;/* 1.8s 事件完成時間周期 infinite無限循環 */ }@keyframes jumpBoxHandler { /* css事件 */0% {transform: translate(0px, 0px);}50% {transform: translate(0px, 30px); /* 可配置跳動方向 */}100% {transform: translate(0px, 0px);} } </style>

---

總結

以上是生活随笔為你收集整理的css实现 元素/图片上下跳动 左右跳动 css动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。