1

ここでフィドルを作成しましたが、オブジェクトを中央に配置する方法を考えました。これにより、ハートが中央に配置され、カーソルを合わせると、右下にアニメーション化されるのではなく、外側に拡大されます。

@-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/

4

1 に答える 1

1

font-transition は使用せず、transform scale のみを使用してください。これを機能させるには、スパンに 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/ 更新で利用できます。

于 2012-10-24T20:23:14.300 に答える