Question

html, body {
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  left: 490px;
  top: 100px;
  background-color: #66ff66;
  width: 400px;
}
input {
  width: 100%;
  height: 100px;
  border: none;
}
table {
  font-size: 40px;
  font-family: 'Orbitron';
  display: flex;
  flex-wrap: all;
  justify-content: center;
}
td {
  padding: 22px 22px;
  text-align: center;
}
td:hover {
  animation-name: animate;
  animation-duration: 0.2s;
  animation-iteration-count: infinite;
}
@keyframes animate {
  0% {color: #ff9900; font-size: 45px;}
  25% {color: #ff0000;}
  50% {color: #66ffcc;}
  75% {color: #3399ff;}
  100% {color: #6600ff;}
}
#td-0 {
  position: relative;
  left: 125px;
}

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Calculator</title>
      <link rel="stylesheet" type="text/css" href="style.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
      <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
    </head>
    <body>
      <div class="container">
        <input type="text" name="screen" disabled>
        <table class="calc-buttons">
          <tr class="row-1">
            <td>C</td>
            <td>CE</td>
            <td><i class="fas fa-long-arrow-alt-left"></i></td>
            <td>/</td>
          </tr>
          <tr class="row-2">
            <td>9</td>
            <td>8</td>
            <td>7</td>
            <td>*</td>
          </tr>
          <tr class="row-3">
            <td>6</td>
            <td>5</td>
            <td>4</td>
            <td>-</td>
          </tr>
          <tr class="row-4">
            <td>3</td>
            <td>2</td>
            <td>1</td>
            <td>+</td>
          </tr>
          <tr class="row-5">
            <td id="td-0">0</td>
          </tr>
        </table>
      </div>
    </body>
  </html>

大家好，我正在设计计算器的样式，并试图将鼠标悬停时更改每个按钮的字体大小。有没有一种方法可以执行此操作，以便按钮或td元素上的字符将独立于其容器而更改大小。因此，它不会将一切都推开吗？谢谢大家的帮助。

Answer 1

您可以将padding悬停在较小的位置，这样可以“取消”较大的font-size。因此，由于font-size中的更改为5像素，因此您在其中更改了font-size，因此我添加了padding: 17px（比初始padding-{{1}小5个像素}。在代码段中。您可以做的另一件事是使用22px来放大元素而不影响其他元素的位置。

scale transform

html, body {
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  left: 490px;
  top: 100px;
  background-color: #66ff66;
  width: 400px;
}
input {
  width: 100%;
  height: 100px;
  border: none;
}
table {
  font-size: 40px;
  font-family: 'Orbitron';
  display: flex;
  flex-wrap: all;
  justify-content: center;
}
td {
  padding: 22px 22px;
  text-align: center;
}
td:hover {
  animation-name: animate;
  animation-duration: 0.2s;
  animation-iteration-count: infinite;

}
@keyframes animate {
  0% {color: #ff9900; font-size: 45px; padding: 17px;}
  25% {color: #ff0000;}
  50% {color: #66ffcc;}
  75% {color: #3399ff;}
  100% {color: #6600ff;}
}
#td-0 {
  position: relative;
  left: 125px;
}

Answer 2

添加字体使字体不能从您的空间中消失吗？

如何在不中断任何间距的情况下更改元素的字体大小？

2 个答案: