在框中居中图标并应用动画比例悬停
Posted
技术标签:
【中文标题】在框中居中图标并应用动画比例悬停【英文标题】：center icons in a box and apply animation scale hover 【发布时间】：2021-07-10 23:17:07 【问题描述】：我似乎无法在这里找到我做错了什么。当元素悬停时，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>
【问题讨论】：
看看我下面的答案，你确实定义了 2 次大图标类，但没用，我添加/修改了一些修复。如有其他问题，请告诉我！ 当然，我没有意识到我已经重复了大图标课程 ahahahah 虽然那不是重要的事情。问题是我在同一个类中定义了一个与图标分开的段落，并且属性显示 flex 全部移动，后来我可以用另一个只包含图标标签的 div 解决这个问题，并证明内容中心的合理性。 【参考方案1】：我不知道你为什么在 CSS 中定义了两次 big-icon 类，但这是我在 CSS 文件底部的修复，仔细看看我评论/删除的那些 CSS 行：
*
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);
【讨论】：
以上是关于在框中居中图标并应用动画比例悬停的主要内容，如果未能解决你的问题，请参考以下文章