4行代码 超级简单 html/css 实现平移动画

废话少说，先上效果图

 

源代码（直接复制粘贴到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!