📝 代码查看
使用runcode.html页面

2
查看次数
2025-12-04
创建时间
2025-12-04
最后更新
<ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
    <li>06</li>
    <li>07</li>
    <li>08</li>
    <li>09</li>
    <li>10</li>
    <li>08</li>
    <li>09</li>
    <li>10</li>
  </ul>  
* {
  background-color: rgba(0,0,0,0.08);
  box-shadow: inset 0 0 1px red;
}
html {
  zoom: 2;
}

ul {
  display: flex;
  padding: 0;
  list-style: none;
  align-items: end;
  justify-content: center;
  height: 50px;
}
li {
  cursor: pointer;
  border-radius: 99999px;
  width: 30px;
  height: 30px;
  text-align: center;
  transition: .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
li:hover {
  font-size: 2em;
  width: 50px;
  height: 50px;
}
li:has(+li:hover),
li:hover + li {
  font-size: 1.5em;
  width: 40px;
  height: 40px;
}
暂无JavaScript代码

👁️ 实时预览