[ad_1]
Asked
Viewed
17 times
I’m Designing an Online Game. There are Items in the game. While updating the Percentage value of the items, the pictures are constantly refreshed and in this case, blinking (blinking problem) occurs. How can i solve this problem.
Can I do this in a different way by changing my HTML and CSS code?
Problem:
var percent = 0;
var countdown = setInterval(function () {
percent++;
$(".food_container > div").each(function(index, element) {
if(percent == 100){ clearInterval(countdown) }
$(element).css({"--value": percent + "%"}).attr("data-value",percent + "%");
});
}, 1000);body{
background-image: linear-gradient(to bottom, #35C10D, #6FE814);
background-repeat: no-repeat;
height: 100vh;
font-family: 'Arial', sans-serif;
}
.food_container{
display: flex;
gap: 30px;
}
.food_container > div {
background-image: var(--image-url);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
position: relative;
display: flex;
height: 60px;
width: 60px;
justify-content: center;
align-items: center;
}
.food_container > div:before {
content: attr(data-value);
display: flex;
justify-content: center;
font-size: 9pt;
align-items: end;
position: absolute;
bottom: -20px;
left: 0;
color: #fff;
right: 0;
height: calc(var(--value) + 20px);
width: 100%;
transition: .3s ease;
box-shadow: 0 -7px 22px -7px rgb(255 255 255 / 12%), 0 -7px 5px -7px white;
border-top: 1px solid rgb(255 255 255 / 58%);
background-image: var(--image-url);
background-size: 60px;
background-position: center bottom 20px;
background-repeat: no-repeat;
filter: grayscale(1) brightness(1.2);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="food_container">
<div style="--value: 0%;--image-url: url(https://svgur.com/i/hrP.svg);" data-value="0%"></div>
<div style="--value: 0%;--image-url: url(https://svgur.com/i/hrm.svg);" data-value="0%"></div>
<div style="--value: 0%;--image-url: url(https://svgur.com/i/hrQ.svg);" data-value="0%"></div>
</div>
asked 46 mins ago
7
default
[ad_2]