在框中居中图标并应用动画比例悬停

Question

我似乎找不到我做错了什么。当元素悬停时，transform:translate 属性会产生不良影响。

请看这个codepen。

https://codepen.io/kuromicho/pen/LYxrQPv

CSS

.row {
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid black;
  
}
.col {
  display: block;
  width:50%;
  float: left;
  border: 1px solid red;
  }
.big-icon {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  transition: scale 0.2s;
}

.big-icon {
  font-size: 300%;
  color: #e67e22;
}

.big-icon:hover {
  transform: scale(1.15);
}

HTML:

<head>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />

  </head>
  <body>
    <div class="row">
      <div class="col">
            <ion-icon name="infinite-sharp" class="big-icon"></ion-icon>
        </div>
       <div class="col">
            <ion-icon name="cart-sharp" class="big-icon"></ion-icon>
        </div>
     </div>
    
  </body>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
</html>

Answer 1

我不知道你为什么在你的 CSS 中定义了两次 big-icon class，但这是我在 CSS 文件底部的修复，取一个仔细看看 CSS I commented/deleted:

的那几行

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  height: 100vh;
}

body {
  font-size: 20px;
  font-family: "Lato", "Arial", sans-serif;
  font-weight: 400;
}

.row {
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid black;
  
}

.col {
  display: flex;
  justify-content: center;
  width: 50%;
/*   float: left; */
  border: 1px solid red;
  
}

.big-icon {
/*   position: relative; */
/*   left: 50%; */
  font-size: 300%;
  color: #e67e22;
/*   transform: translateX(-50%); */
  transition: transform 0.2s ease;
}


.big-icon:hover {
  transform: scale(1.15);
}

在框中居中图标并应用动画比例悬停

center icons in a box and apply animation scale hover

css

icons

animation

transform

hover