Question

我正在使用scale属性做一个简单的动画，但我面临以下问题：

它在Mozilla Firefox浏览器中运行良好，但在缩放到大的时候，它会在谷歌浏览器中模糊结果。为什么会这样？我为Google Chrome使用了-webkit-前缀。

我有以下代码：

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Free Sorry eCard</title>

</script>
<style>
.background-effect{
    height:600px;
    width:800px;
    width:800px;
    position:absolute;
    overflow:hidden;
    display:block;
    z-index:1;
}

.b1-heart{
    position: absolute; 
    width: 100px;
    height: 90px; 
    top:250px;
    left:350px;
    opacity:0;
    -moz-animation: heartBeat 4s linear 0s infinite;
    -webkit-animation: heartBeat 4s linear 0s infinite;
}

.b1-heart:before, .b1-heart:after{
    position: absolute; content: ""; left: 50px; top: 0; width: 50px;   height: 80px; 
    background: #ff0066; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%;  }
.b1-heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%;}



@-moz-keyframes heartBeat{
    0%{-moz-transform:scale(1);opacity:0;}
    50%{-moz-transform:scale(5);opacity:.5;}
    100%{-moz-transform:scale(10);opacity:0;}

}@-webkit-keyframes heartBeat{
    0%{-webkit-transform:scale(1);opacity:0;}
    50%{-webkit-transform:scale(5);opacity:.5;}
    100%{-webkit-transform:scale(10);opacity:0;}

}

.b3-heart{
    position: absolute; 
    width: 100px;
    height: 90px; 
    top:350px;
    left:50px;
    opacity:.2;
    -moz-animation: heartBeat 1.5s linear 0s infinite;
    -webkit-animation: heartBeat 1.5s linear 0s infinite;
}

.b3-heart:before, .b3-heart:after{
    position: absolute; content: ""; left: 50px; top: 0; width: 50px;   height: 80px; 
    background: #00ccff; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%;  }
.b3-heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%;}


.b2-heart{
    position: absolute; 
    width: 100px;
    height: 90px; 
    top:350px;
    right:50px;
    opacity:.2;
    -moz-animation: heartBeat 1.5s linear 0s infinite;
    -webkit-animation: heartBeat 1.5s linear 0s infinite;
}

.b2-heart:before, .b2-heart:after{
    position: absolute; content: ""; left: 50px; top: 0; width: 50px;   height: 80px; 
    background: #00ccff; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%;  }
.b2-heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%;}


.b4-heart{
    position: absolute; 
    width: 100px;
    height: 90px; 
    top:550px;
    right:350px;
    opacity:.2;
    -moz-animation: heartBeat 2s linear 0s infinite;
    -webkit-animation: heartBeat 2s linear 0s infinite;
}

.b4-heart:before, .b4-heart:after{
    position: absolute; content: ""; left: 50px; top: 0; width: 50px;   height: 80px; 
    background: #fff000; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%;  }
.b4-heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%;}


</style>

</head>
<body>


<div id="container1">

    <div class="background-effect">

      <div class='b1-hearts'></div>
      <div class='b2-hearts'></div>
      <div class='b3-hearts'></div>
      <div class='b4-hearts'></div>

    </div>

</div>

</body>
</html>

CSS3 Scale属性模糊Google Chrome中动画的结果

0 个答案: