我目前正在进行一个项目,其中涉及一个圆圈随机填充一种颜色到某一点。我使用了一个带边框半径的div来创建圆+overflow:hidden
和另一个div来模拟“填充”。
See JSFiddle
HTML格式:
<div class="circleswrap">
<div class="circlediv">
<div class="circle">
<div id="animateddiv1">
</div>
</div>
</div>
</div>
CSS:
.circle {
position: relative;
border-radius: 50%;
-o-border-radius: 50%;
overflow: hidden;
background: #8a8a8a;
width: 165px;
height: 165px;
display: inline-block;
margin: 0 75px;.
}
#animateddiv1 {
background: #63B23A;
position: absolute;
top: 130px;
width: 200px;
height: 165px
}
Awesome在我的浏览器中工作得很好,但我必须让它在一个过时的Opera浏览器上工作,该浏览器集成到一个智能显示器中(而且实际上是不可更新的)。
众所周知,旧版本的Opera不支持边界半径+溢出:隐藏+位置:相对/绝对的组合
PS:我知道-o-边界半径不是一个“东西”,但我试过它不是没有。。。一个人总有梦想:^)
我一直在想办法,但我没主意了。
我希望这个美好的社区能帮助我:)
最佳答案
这有点像在黑暗中拍摄,因为我不知道需要什么版本的歌剧。但您可以尝试使用background-image: linear-gradient();
这样地:
setInterval(function () {
var percentage = Math.floor(Math.random() * 100);
$(".circle").css("background-image", 'linear-gradient( 0deg, #63B23A ' + percentage + '%, #8a8a8a ' + percentage + '%' + ' )')
}, 3000);
This seems to be supported from Opera 11.1
当然,不要模糊浏览器前缀
-o-
所以代码可能是这样的:
setInterval(function () {
var percentage = Math.floor(Math.random() * 100);
$(".circle").css("background-image", '-o-linear-gradient( 0deg, #63B23A ' + percentage + '%, #8a8a8a ' + percentage + '%' + ' )')
}, 3000);
这里有一个演示:http://jsfiddle.net/05dkfoxj/2/
祝你好运。
关于html - CSS/HTML/边界半径或溢出的任何替代方法:隐藏?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27840465/