[分享]Css列表元素位置转换动画

Css列表元素位置转换动画是一种比较常用的网页动效之一。

ul li {
  position: relative; /* 让li元素支持定位 */
  transition: all 0.5s ease-in-out; /* 定义li元素的位置过渡动画 */
}
ul li:hover {
  left: 20px; /* 鼠标悬浮在li元素上时让位置向右移动20像素 */
} 

以上是一个简单的Css代码片段，其中通过给ul下的li元素设置position:relative，使得li元素可以支持定位；通过transition属性设置li元素的过渡动画，且这里的过渡动画定义了持续时间为0.5秒，并应用了easing动画函数，使得动画效果更加顺畅；最后在li元素的:hover伪类中设置了位置left属性，当鼠标悬浮在li元素上时，会触发位置向右移动20像素的动画效果。