居中 CSS 变换（缩放）

Question

我在这里创建了一个小提琴，只是想知道如何使对象居中 - 使心脏居中，当您将鼠标悬停在它上面时它会向外缩放，而不是在右下方设置动画。

@-webkit-keyframes beat {
0% {
-webkit-transform: scale(1);
-webkit-filter: drop-shadow(0 0 8px rgba(213, 9, 60, 0.7));
font-size: 90%;
color: #cc0404;
}

50% {
-webkit-transform: scale(1.1);
-webkit-filter: drop-shadow(0 0 15px rgba(213, 9, 60, 0.2));
font-size: 120%;
color: #e50505;
}

100% {
-webkit-transform: scale(1);
-webkit-filter: drop-shadow(0 0 8px rgba(213, 9, 60, 0.7));
font-size: 90%;
color: #cc0404;
}
}

.heart-box {
margin: 0 auto;
width: 90%;
padding-top: 20px;
cursor: pointer;
font-size: 15em;
-webkit-filter: drop-shadow(0 0 0 white);
-moz-filter: drop-shadow(0 0 0 white);
filter: drop-shadow(0 0 0 white);
}

.heart {
color: #e62020;
-webkit-transition: font-size 0.1s ease;
-moz-transition: font-size 0.1s ease;
transition: font-size 0.1s ease;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
transition: color 0.3s ease;
}

.heart:hover, .heart:focus {
-webkit-animation: beat 0.7s ease 0s infinite normal;
-moz-animation: beat 0.7s ease 0s infinite normal;
-ms-animation: beat 0.7s ease 0s infinite normal;
-o-animation: beat 0.7s ease 0s infinite normal;
animation: beat 0.7s ease 0s infinite normal;
}

http://jsfiddle.net/DBirkett/3DbTn/

Answer 1

不要使用字体转换，只需使用转换比例。为了让它工作，你必须在你的跨度上设置 display:inline-block，因为内联元素还不支持 webkit 中的转换。您可能没有注意到，但您原始代码中的这些转换在 webkit 浏览器中没有任何效果。

类似的东西

@-webkit-keyframes beat {
  0% {
    -webkit-transform: scale(1);
    -webkit-filter: drop-shadow(0 0 8px rgba(213, 9, 60, 0.7));
    color: #cc0404;
  }

  50% {
    -webkit-transform: scale(2);
    -webkit-filter: drop-shadow(0 0 15px rgba(213, 9, 60, 0.2));
    color: #e50505;
  }

  100% {
    -webkit-transform: scale(1);
    -webkit-filter: drop-shadow(0 0 8px rgba(213, 9, 60, 0.7));
    color: #cc0404;
  }
}


.heart {
  display: inline-block;
  color: #e62020;
  -webkit-transition: font-size 0.1s ease;
  -moz-transition: font-size 0.1s ease;
  transition: font-size 0.1s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

此外，可在 /7/ 中更新您的原始小提琴。