css27-菜单悬浮（定位、旋转、位移、透明度）

代码示例

学习内容

核心的代码，是对 span 进行逐层位移、逐层减少 opacity 透明度。按理应该不需要重复写出 span 的。

ul li:hover span:nth-child(5) {
    transform: translate(80px, -80px);
    opacity: 1;
}
ul li:hover span:nth-child(4) {
    transform: translate(60px, -60px);
    opacity: 0.8;
}
ul li:hover span:nth-child(3) {
    transform: translate(40px, -40px);
    opacity: 0.6;
}
ul li:hover span:nth-child(2) {
    transform: translate(20px, -20px);
    opacity: 0.4;
}
ul li:hover span:nth-child(1) {
    transform: translate(0, 0);
    opacity: 0.2;
}