案例---分页按钮

这个可以做以前巨火的弹钢琴，我好爱这个效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>分页按钮</title>
  </head>
  <style>
    /* 给li一个边框 */
    li {
      width: 30px;
      height: 30px;
      /* 文字水平居中 */
      text-align: center;
      line-height: 30px;
      float: left;
      margin: 10px;
      border: 1px solid green;
      /* border-radius: 1px; */
      border-radius: 50%;
      list-style: none;
      transition: all 0.2s;
      /* 谁过度给谁加 */
    }
    li:hover {
      transform: scale(2);
    }
  </style>
  <body>
    <!-- 这个是有7个按钮，鼠标一经过会变大 -->

    <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
    </ul>
  </body>
</html>
posted @ 2022-03-16 22:23  missSherry1014  阅读(136)  评论(0)    收藏  举报