【CSS】一个时钟在火狐浏览器下出现的问题
这个时钟在谷歌和IE中都没问题，但是在火狐中秒针有一个不明的杂边，这是为什么？
像这样：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clock-demo</title>
<style id="clock-animations"></style>
<style>
html,body {
margin: 0px;
padding: 0px;
height: 100%;
background-image: linear-gradient(#E7E7E7,#d7d7d7);
}
.clock-wrapper {
position: absolute;
left: 50%;
top: 50%;
margin: -125px -125px;
height: 250px;
width: 250px;
padding: 5px;
background-image: linear-gradient(#f7f7f7,#e0e0e0);
border-radius: 50%;
box-shadow: 0 10px 15px rgba(0,0,0,.15),0 2px 2px rgba(0,0,0,.2);
}
.clock-base {
width: 250px;
height: 250px;
background-color: #eee;
border-radius: 50%;
box-shadow: 0 0 5px #eee;
}
.clock-indicator {
z-index: 1;
position: absolute;
top: 15px;
left: 15px;
width: 230px;
height: 230px;
}
.clock-indicator div {
position: absolute;
width: 2px;
height: 4px;
margin: 113px 114px;
background-color: #a4a4a4;
}
.clock-indicator div:nth-child(1) {
transform:rotate(30deg) translateY(-113px);
-ms-transform:rotate(30deg) translateY(-113px); /* IE 9 */
-moz-transform:rotate(30deg) translateY(-113px); /* Firefox */
-webkit-transform:rotate(30deg) translateY(-113px); /* Safari 和 Chrome */
-o-transform:rotate(30deg) translateY(-113px); /* Opera */ }
.clock-indicator div:nth-child(2) {
transform:rotate(60deg) translateY(-113px);
-ms-transform:rotate(60deg) translateY(-113px); /* IE 9 */
-moz-transform:rotate(60deg) translateY(-113px); /* Firefox */
-webkit-transform:rotate(60deg) translateY(-113px); /* Safari 和 Chrome */
-o-transform:rotate(60deg) translateY(-113px); /* Opera */
}
.clock-indicator div:nth-child(3) {
transform:rotate(90deg) translateY(-113px);
-ms-transform:rotate(90deg) translateY(-113px); /* IE 9 */
-moz-transform:rotate(90deg) translateY(-113px); /* Firefox */
-webkit-transform:rotate(90deg) translateY(-113px); /* Safari 和 Chrome */
-o-transform:rotate(90deg) translateY(-113px); /* Opera */
background-color: #5a5a5a;
}
.clock-indicator div:nth-child(4) {
transform:rotate(120deg) translateY(-113px);
-ms-transform:rotate(120deg) translateY(-113px); /* IE 9 */
-moz-transform:rotate(120deg) translateY(-113px); /* Firefox */
-webkit-transform:rotate(120deg) translateY(-113px); /* Safari 和 Chrome */
-o-transform:rotate(120deg) translateY(-113px); /* Opera */
}
.clock-indicator div:nth-child(5) {
transform:rotate(150deg) translateY(-113px);
-ms-transform:rotate(150deg) translateY(-113px); /* IE 9 */
-moz-transform:rotate(150deg) translateY(-113px); /* Firefox */
-webkit-transform:rotate(150deg) translateY(-113px); /* Safari 和 Chrome */
-o-transform:rotate(150deg) translateY(-113px); /* Opera */
}
.clock-indicator div:nth-child(6) {
transform:rotate(180deg) translateY(-113px);
-ms-transform:rotate(180deg) translateY(-113px); /* IE 9 */
-moz-transform:rotate(180deg) translateY(-113px); /* Firefox */
-webkit-transform:rotate(180deg) translateY(-113px); /* Safari 和 Chrome */
-o-transform:rotate(180deg) translateY(-113px); /* Opera */
background-color: #5a5a5a;
}
.clock-indicator div:nth-child(7) {
transform:rotate(210deg) translateY(-113px);
-ms-transform:rotate(210deg) translateY(-113px); /* IE 9 */
-moz-transform:rotate(210deg) translateY(-113px); /* Firefox */
-webkit-transform:rotate(210deg) translateY(-113px); /* Safari 和 Chrome */
-o-transform:rotate(210deg) translateY(-113px); /* Opera */
}
.clock-indicator div:nth-child(8) {
transform:rotate(240deg) translateY(-113px);
-ms-transform:rotate(240deg) translateY(-113px); /* IE 9 */
-moz-transform:rotate(240deg) translateY(-113px); /* Firefox */
-webkit-transform:rotate(240deg) translateY(-113px); /* Safari 和 Chrome */
-o-transform:rotate(240deg) translateY(-113px); /* Opera */
}
.clock-indicator div:nth-child(9) {
transform:rotate(270deg) translateY(-113px);
-ms-transform:rotate(270deg) translateY(-113px); /* IE 9 */
-moz-transform:rotate(270deg) translateY(-113px); /* Firefox */
-webkit-transform:rotate(270deg) translateY(-113px); /* Safari 和 Chrome */
-o-transform:rotate(270deg) translateY(-113px); /* Opera */
background-color: #5a5a5a;
}
.clock-indicator div:nth-child(10) {
transform:rotate(300deg) translateY(-113px);
-ms-transform:rotate(300deg) translateY(-113px); /* IE 9 */
-moz-transform:rotate(300deg) translateY(-113px); /* Firefox */
-webkit-transform:rotate(300deg) translateY(-113px); /* Safari 和 Chrome */
-o-transform:rotate(300deg) translateY(-113px); /* Opera */
}
.clock-indicator div:nth-child(11) {
transform:rotate(330deg) translateY(-113px);
-ms-transform:rotate(330deg) translateY(-113px); /* IE 9 */
-moz-transform:rotate(330deg) translateY(-113px); /* Firefox */
-webkit-transform:rotate(330deg) translateY(-113px); /* Safari 和 Chrome */
-o-transform:rotate(330deg) translateY(-113px); /* Opera */
}
.clock-indicator div:nth-child(12) {
transform:rotate(360deg) translateY(-113px);
-ms-transform:rotate(360deg) translateY(-113px); /* IE 9 */
-moz-transform:rotate(360deg) translateY(-113px); /* Firefox */
-webkit-transform:rotate(360deg) translateY(-113px); /* Safari 和 Chrome */
-o-transform:rotate(360deg) translateY(-113px); /* Opera */
background-color: #5a5a5a;
}
.clock-hour {
z-index: 2;
position: absolute;
left: 128px;
top: 80px;
width: 4px;
height: 65px;
border-radius: 2px;
background-color: #555;
box-shadow: 0 0 2px rgba(0,0,0,0.2);
transform-origin: 2px 50px;
-moz-transform-origin: 2px 50px;
-ms-transform-origin: 2px 50px;
-o-transform-origin: 2px 50px;
-webkit-transform-origin: 2px 50px;
transition: 1s;
-moz-transition: 1s; /* Firefox 4 */
-webkit-transition: 1s; /* Safari 和 Chrome */
-o-transition: 1s; /* Opera */
animation:rotate-hour 43200s linear infinite;
-webkit-animation: rotate-hour 43200s linear infinite; /* Safari 和 Chrome */
}
.clock-minute {
z-index: 3;
position: absolute;
left: 128px;
top: 60px;
width: 4px;
height: 85px;
border-radius: 2px;
background-color: #555;
box-shadow: 0 0 2px rgba(0,0,0,0.2);
transition: 1s;
-moz-transition: 1s; /* Firefox 4 */
-webkit-transition: 1s; /* Safari 和 Chrome */
-o-transition: 1s; /* Opera */
transform-origin: 2px 70px;
-moz-transform-origin: 2px 70px;
-ms-transform-origin: 2px 70px;
-o-transform-origin: 2px 70px;
-webkit-transform-origin: 2px 70px;
animation:rotate-minute 3600s linear infinite;
-webkit-animation: rotate-minute 3600s linear infinite; /* Safari 和 Chrome */
}
.clock-second {
z-index: 4;
position: absolute;
left: 129px;
top: 15px;
width: 2px;
height: 140px;
border-radius: 2px;
background-color: #a00;
box-shadow: 0 0 1px rgba(0,0,0,0.2);
transform-origin: 1px 115px;
-moz-transform-origin: 1px 115px;
-ms-transform-origin: 1px 115px;
-o-transform-origin: 1px 115px;
-webkit-transform-origin: 1px 115px;
transition: 1s;
-moz-transition: 1s; /* Firefox 4 */
-webkit-transition: 1s; /* Safari 和 Chrome */
-o-transition: 1s; /* Opera */
animation:rotate-hour 60s linear infinite;
-webkit-animation: rotate-second 60s linear infinite; /* Safari 和 Chrome */
}
.clock-second:after {
content: "";
display: block;
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
left: -3px;
top:110px;
background-color: #a00;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
}
.clock-center {
z-index: 1;
position: absolute;
left: 55px;
top: 55px;
background-image: linear-gradient(#e3e3e3,#f7f7f7);
border-radius: 50%;
width: 150px;
height: 150px;
box-shadow: inset 0 -1px 0 #fafafa, inset 0 1px 0 #e3e3e3;
}
.clock-center:after{
content: "";
display: block;
width: 20px;
height: 20px;
margin: 65px;
background-color: #ddd;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="clock-wrapper">
<div class="clock-base">
<div class="clock-indicator">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="clock-hour"></div>
<div class="clock-minute"></div>
<div class="clock-second"></div>
<div class="clock-center"></div>
</div>
</div>
<script type="text/javascript">
(function(){
//generate clock animations
var now = new Date();
var second = now.getSeconds();
var minute = now.getMinutes();
var hour = now.getHours();
if (hour > 12) {
hour = hour - 12;
}
hourDeg = hour * 30 + now.getMinutes() / 60 * 30;
minuteDeg = now.getMinutes() * 6;
secondDeg = now.getSeconds() * 6;
stylesDeg = [
"@keyframes rotate-hour{ from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}",
"@keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}",
"@keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}",
"@-moz-keyframes rotate-hour{ from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}",
"@-moz-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}",
"@-moz-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}",
"@-webkit-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}",
"@-webkit-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}",
"@-webkit-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}"
].join("");
document.getElementById("clock-animations").innerHTML = stylesDeg;
})();
</script>
</body>
</html>
回答：
没太理解你说的杂边，是指指针非垂直或水平的时候屏幕出现的不是一条直线的东西？
效果不错0.0，收藏。
回答：
单单贴上来的代码来看，FF下也是完全正常的。。
题主可以看下是不是插件的关系或者别的可能，比如说有别的js片段或者css影响到了
以上是 【CSS】一个时钟在火狐浏览器下出现的问题 的全部内容， 来源链接： utcz.com/a/155454.html
