3

我想在我的网站上尽可能只使用 HTML5 和 CSS3。

我正在尝试为我的联系按钮上的文本设置动画。更具体地说，我希望它font-weight: bolder每 20 秒改变一次颜色并变为 4 秒。

现在它确实会切换颜色，但它不会在 Chrome、Safari 和 Opera 中变得粗体。它在 Firefox 和 IE 中运行良好。

这是我正在使用的 CSS：

#contact {
position: fixed;
margin-top: 63px;
margin-left: 680px;
width: 250px;
height: 55px;
transform:rotate(-36.87deg);
z-index: 20 !important;
font-size: 24px;
line-height: 55px;
text-align: center;
text-decoration: none;
color: #FFFFFF;
transition: all 1s ease;
animation-name: alarmlight;
animation-iteration-count: infinite;
animation-duration: 20s;
}

@keyframes alarmlight {
0% { color: #FFFFFF; font-weight: normal; }
80% { color: #FFFFFF; font-weight: normal; }
85%{ color: #00F; font-weight: bolder; }
90% { color: #F00; font-weight: bolder; }
95% { color: #00F; font-weight: bolder; }
100% { color: #F00; font-weight: bolder; }
}

a#contact:hover {
color: #FFF101 !important;
font-weight:bold !important;
animation-name:none;
transition: all 1s ease;
transform: translate(18px,-18px) rotate(-36.87deg);
}

在这里查看它的实际效果。

更新：还创建了一个简单的jsfiddle来显示其核心问题。

更新：更新了这篇文章中的 CSS 以反映我在当前状态下使用的代码。

4

1 回答 1

1

我实际上认为浏览器可能不支持动画中的字体粗细，即使它被列为受支持的属性。当我在玩弄它时，我确实用一堆新代码更新了你的jsfiddle来清理东西，比如......

0% { color: #FFFFFF; font-size:1em; }

...结合你的动画（没有理由有两个），添加无前缀（以避免所有这些前缀），并且在实验之外，使用字体大小而不是字体粗细（至少这样有效）。

于 2013-10-13T06:52:41.710 回答