css列表设悬浮会全部一起动

在网页设计中，列表是非常常用的元素，如何让这些列表显得更加动态呢？今天我们来学习一下如何设置一个CSS列表悬浮会全部一起动的效果。

ul li{
    transition:transform .3s ease; 
}
ul li:hover{
    transform:rotate(360deg); 
}

上面这段CSS代码的意思是，当鼠标指向列表某一项时，这一项会顺时针旋转360度。使用transition属性可以使得旋转有一个平滑的过渡效果。

但是这段代码只能让鼠标指向的那一项旋转，怎样才能让全部的列表项一起动呢？我们来看下面的代码：

ul{
    position:relative;
}
ul li{
    position:relative;
}
ul li:hover{
    z-index:1;
}
ul li:hover ~ li{
    transform:rotate(360deg); 
    z-index:2;
}

这段代码的作用是，当鼠标指向某一项时，当前项会移动到最上面，同时后面的所有项也会旋转起来。其中：通过给ul和li都设置position:relative属性，使得后面的元素可以相对于前面的元素定位；使用z-index属性控制元素的层级，从而使当前项排在最上面；使用tilde(~)选择器选取后面所有的兄弟元素。

通过以上的方法，我们可以给列表增加一个非常酷炫的效果，为网页增添一份动态的美感。