Fade-in animação do relógio em svg img [fechado]
Uso uma imagem svg no meu HTML e quero que ela desapareça. Até aqui nada difíci
Mas o que eu preciso é que o fade-in não seja igual em todos os lugares da imagem. Quero um início progressivo do desbotamento do topo, depois siga um círculo virtual ao redor da foto até que o círculo esteja complet
Para retomar algo como a transição do relógio no power point ligaçã).
Tento usar gradiente radial comoAqu. Mas não encontro outra maneira de fazer senão um círculo progressivo do centro ou para o centro. Além disso, eu uso um plano de fundo e a imagem svg tem alguma transparência, portanto o gradiente não funcion
Aqui está o código que eu tenho, na verdade eu sei que não é muito, mas não encontro nenhuma direção para obter o resultado desejado:
var isAnimProgressing = false;
$("#button1").click(function() {
var opa = "0";
if(!isAnimProgressing) {
isAnimProgressing = true;
if($(".test").css("opacity") == "1") {
opa = "0";
} else {
opa = "1";
}
$(".test").animate({opacity: opa}, 2000, "linear", function() {
isAnimProgressing = false;
});
}
});
$("#button2").click(function() {
if($(".test").hasClass("done")) {
$(".test").removeClass("done");
} else {
$(".test").addClass("done");
}
});
body {
background-image : url(https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg);
}
.test {
opacity: 0;
transition: all 2s ease;
}
.test.done {
opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="button1">JS</button> OR
<button id="button2">CSS</button>
<div class="test loading">
<img src='https://s.cdpn.io/3/kiwi.svg' alt='loading-cat'>
</div>
</body>
</html>