Jquery CSS转换不';在铬中不能正常工作
我的CSS转换在Chrome中无法正常工作。它在Chrome中提供了模糊效果,但在Firefox中效果很好 下面是圆形动画的示例。我建议您在Chrome浏览器中以最大屏幕宽度查看此内容 以下是HTML:Jquery CSS转换不';在铬中不能正常工作,jquery,css,google-chrome,transform,Jquery,Css,Google Chrome,Transform,我的CSS转换在Chrome中无法正常工作。它在Chrome中提供了模糊效果,但在Firefox中效果很好 下面是圆形动画的示例。我建议您在Chrome浏览器中以最大屏幕宽度查看此内容 以下是HTML: <button>Inflate!</button> <div class='bubble'></div> JavaScript(jQuery): 你就快到了,我亲爱的朋友。在我的Chrome veriosn上检查过这支笔,效果很好 但是,我建议您
<button>Inflate!</button>
<div class='bubble'></div>
JavaScript(jQuery):
你就快到了,我亲爱的朋友。在我的Chrome veriosn上检查过这支笔,效果很好 但是,我建议您在处理CSS转换和转换时深入研究供应商特定的CSS属性 以下是一些肯定对您有用的链接: 跨浏览器转换: 跨浏览器转换:
.bubble {
position: relative;
left: 50px;
top: 20px;
transform: scale(1);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #C00;
transition-origin: center;
transition: all 0.5s;
overflow: hidden;
}
.bubble.animate {
transform: scale(30);
}
.bubble.ani {
transform: scale(1);
}
$('button').click(function() {
$('.bubble').addClass('animate');
});
$('.buuble').click(function() {
$(this).removeClass('animate');
$(this).addClass('ani');
});
.example {
-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s;
}
.element {
-webkit-transform: value;
-moz-transform: value;
-ms-transform: value;
-o-transform: value;
transform: value;
}