廢話少說，先上效果圖

?

源代碼（直接復制粘貼到txt另存為html文件即可）:

<div style="transition: transform 1s;height:150px;width:150px;background-color:red"></div> <style>div:hover {transform: translateX(300px);} </style>

?

注:此代碼僅做為效果演示，并不規范，實際使用請規范代碼

translateX參數正值往右移，負值是往左移，另有translateY(20px)：上下移動，還有同時上下左右移動：translate(100px,200px)。

?

如果我的文章對您有幫助，就請客官給個贊吧

THE END!

總結

以上是生活随笔為你收集整理的4行代码 超级简单 html/css 实现平移动画的全部內容，希望文章能夠幫你解決所遇到的問題。

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