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

不要使用字体转换，只需使用转换比例。为了使其工作，您必须在span上设置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 /更新到您原来的小提琴。

居中CSS变换（规模）

1 个答案: