一个时钟在火狐浏览器下出现的问题

这个时钟在谷歌和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>

css3 Animation JavaScript


share
比利海靈頓 9 years, 8 months ago

Answers

单单贴上来的代码来看，FF下也是完全正常的。。
题主可以看下是不是插件的关系或者别的可能，比如说有别的js片段或者css影响到了

clipboard.png


share
天心skyル answered 9 years, 8 months ago

没太理解你说的杂边，是指指针非垂直或水平的时候屏幕出现的不是一条直线的东西？
效果不错0.0，收藏。


share
白色的小空 answered 9 years, 8 months ago

Your Answer

Ask Question
Related questions

为何在chrome中本地网页加载速度巨慢？

如何完全禁止滚动条

如何做到只点击 div border-radus:50% 的圆形区域

如何在手机上禁止浏览器的网页滚动

transform-rotate旋转后，用js获取元素所占的宽度

移动页面滚动穿透如何解决
Related posts

关爱Rang-tan, 关爱自然母亲

日本动画片制作流程介绍