3

Я использую изображение SVG в своем HTML, и я хочу, чтобы оно появилось. Пока здесь ничего сложного.

Но что мне нужно, так это то, чтобы изображение было не везде одинаковое.

Я хочу, чтобы постепенный переход начинался сверху, затем следовал по виртуальному кругу вокруг изображения, пока круг не будет завершен.

Чтобы возобновить что-то вроде перехода часов на powerpoint

Я пытаюсь использовать радиальный градиент, как здесь

Но я не нахожу никакого другого способа, кроме прогрессивного круга из центра или в центр. Кроме того, я использую фон, и изображение SVG имеет некоторую прозрачность, поэтому градиент не работает.

Вот код, который у меня есть на самом деле, я знаю, что его немного, но я не нахожу никакого направления, на которое я могу взглянуть, чтобы получить желаемый результат:

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>

1

2 ответа 2

4

Вы можете делать что хотите с анимированной маской SVG и получить нужный вам эффект:

$("#button2").click(function() {
  document.getElementById("clocksweep").beginElement();
});
body {
  background-image : url(https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="button2">SVG</button>
<div class="test loading">
<svg width="612px" height="502.174px" viewBox="0 65.326 612 502.174">
  <defs>
    <mask id="reveal" maskContentUnits="objectBoundingBox">
      <rect width="100%" height="100%" fill="white"/>
      <path d="M0,0 L0,1,1,1,1,0 Z" fill="black">
        <animate id="clocksweep" attributeName="d" dur="2s" begin="indefinite" fill="freeze"
          values="M 0.5,0.5 L 0.5,0, 1,0, 1,0.5, 1,1, 0.5,1, 0,1, 0,0.5, 0,0, 0.5,0 Z;
                  M 0.5,0.5 L 1,0, 1,0, 1,0.5, 1,1, 0.5,1, 0,1, 0,0.5, 0,0, 0.5,0 Z;
                  M 0.5,0.5 L 1,0.5, 1,0.5, 1,0.5, 1,1, 0.5,1, 0,1, 0,0.5, 0,0, 0.5,0 Z;
                  M 0.5,0.5 L 1,1, 1,1, 1,1, 1,1, 0.5,1, 0,1, 0,0.5, 0,0, 0.5,0 Z;
                  M 0.5,0.5 L 0.5,1, 0.5,1, 0.5,1, 0.5,1, 0.5,1, 0,1, 0,0.5, 0,0, 0.5,0 Z;
                  M 0.5,0.5 L 0,1, 0,1, 0,1, 0,1, 0,1, 0,1, 0,0.5, 0,0, 0.5,0 Z;
                  M 0.5,0.5 L 0,0.5, 0,0.5, 0,0.5, 0,0.5, 0,0.5, 0,0.5, 0,0.5, 0,0, 0.5,0 Z;
                  M 0.5,0.5 L 0,0, 0,0, 0,0, 0,0, 0,0, 0,0, 0,0, 0,0, 0.5,0 Z;
                  M 0.5,0.5 L 0.5,0, 0.5,0, 0.5,0, 0.5,0, 0.5,0, 0.5,0, 0.5,0, 0.5,0, 0.5,0 Z"
          keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"/>
      </path>
    </mask>
  </defs>
  <g mask="url(#reveal)">
    <ellipse fill="#C6C6C6" cx="283.5" cy="487.5" rx="259" ry="80"/>
    <path id="bird" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03
 	c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341
	c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933
	c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991
	c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875
	c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489
	c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309
	c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876
	c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413
	c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566
	c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156
	c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351
	c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247
	c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331
	z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111
	C434.693,207.929,439.613,203.01,445.731,203.01z"/>
  </g>
</svg>
</div>

1

Вариант CSS

$("#button2").click(function() {
  document.querySelector("#reveal").classList.add("animate");
});
.cow {
background-image: url(https://i.stack.imgur.com/ACEUb.jpg);
background-size:cover;

}
#reveal circle {
    stroke-dasharray: 3.15px;
    stroke-dashoffset: 0px;
}
#reveal.animate circle {
    animation: clocksweep 2s linear forwards;
}

@keyframes clocksweep {
    100% { stroke-dashoffset: 3.15px; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="button2">Click me</button>
<div class="cow">
<svg width="612px" height="792px" viewBox="0 0 612 792" >
  <defs>
    <mask id="reveal" maskContentUnits="objectBoundingBox">
      <rect width="100%" height="100%" fill="white"/>
      <circle r="0.5" cx="0.5" cy="0.5" transform="matrix(0,-1,-1,0,1,1)" fill="none" stroke="black" />
    </mask>
  </defs>
 
  <g mask="url(#reveal)">
  
    <path id="cowboy" fill="#4D2E1E"  d="M247 327c0 20-2 49-4 71 -2 25-6 42-3 69 2 27 10 64 15 98 5 35 7 67 6 90 -1 23-5 35-7 43 -2 8-4 13-2 15s6 1 14 2l0 0c0 1-1 2-2 3 -3 4-10 7-15 9 -5 1-9 1-12 1 -3 0-4 0-5 3 -1 3-2 8-1 12 1 4 5 6 12 7 6 1 15 0 22-1 8-1 14-3 19-5 4-1 6-2 8-2 2 1 3 4 5 5 2 1 5 2 9 2s9-1 12-2c3-1 5-3 6-8 1-4 1-10 1-16 1 0 3 0 4-1 5-2 5-6 2-22 -3-16-9-44-14-70 -5-26-8-51-10-77 -2-26-1-54-1-70 1-16 3-20 6-8 4 12 10 41 17 75 7 34 14 72 17 100 3 28 2 44 1 55s-3 15 0 17c1 0 2 1 4 1 0 1 0 2 0 3 -1 7 0 15 1 20 1 5 2 7 6 8 3 1 8 2 12 2 4 0 7 0 9-2 2-1 3-4 5-5 2-1 4 0 8 2 4 1 11 4 19 5 8 1 16 2 22 1 6-1 10-3 12-7 1-4 0-9-1-12 -1-3-2-3-5-3 -3 0-7 0-12-1 -5-1-12-4-15-9 0-1-1-1-1-2 5 0 8 0 9-2 1-3-3-11-7-27 -4-16-8-41-12-72 -4-30-8-67-10-99s-4-62-8-88c-4-26-9-49-12-69 -2-14-1-26-1-38 3-17 8-37 12-61 1-6 2-13 3-19 1-3 2-5 4-6 2-1 6 0 11 1 6 1 13 4 22 5 9 1 20 0 26-4 6-4 9-12 8-21 -1-9-6-21-11-34 -5-14-10-30-14-38 -3-8-5-8-6-8 -1 0-3 0-4 0 -1-1-2-2-3-5 -1-3-3-8-4-13 -1-5-1-10-4-14 -3-4-8-6-15-9 -1 0-2-1-2-1 5-3 9-8 10-13 2-5 0-10-4-13 -5-3-12-4-19-3 -3 0-5 1-7 2 0 0 0-1 0-1 0-9-2-18-4-25 -2-6-5-9-7-10s-5 2-8 3c-3 1-8 0-13 0s-11-2-15-3 -9-3-13-2c-4 1-7 5-9 10 -2 4-3 10-3 16 -4-1-7-2-10-2 -9-1-15 1-19 5 -4 4-6 10-6 15 1 6 4 12 9 17 6 5 13 10 22 12 1 0 2 0 3 1 0 3 1 6 2 9 0 1 0 3 0 4 0 6 0 12-2 18 -1 3-3 7-5 10 -5-1-10-1-15 0 -7 1-13 3-15 5 -2 2 1 5 1 8 0 1-1 2-1 3 -9 2-16 4-22 6 -5 2-10 4-12 7v0l0 0c-4 4-7 11-12 26 -5 15-11 40-17 63 -5 24-10 47-13 66 -3 19-6 34-8 44 -2 10-4 14-3 16 1 1 2 1 4 1 -2 3-4 5-5 8 -2 3-3 7-3 11 0 1 0 3 0 4l0 0c-2 1-4 0-6-1 -1-1-2-2-2-2s-1 2-2 8c-1 6-1 16-1 30 0 14 0 31-1 40 -1 9-2 9-2 9s2 2 4 2c2 0 5 0 6-2s1-5 1-11 0-14 1-19c1-5 2-7 3-9 1-2 3-5 5-6 2-1 5 0 8-1 3-1 5-4 7-8 2-4 3-9 4-13s1-7 2-10c0 0 0-1 0-1 1 0 1-1 2-1 1-1 2-3 3-4 2-1 6-2 8-3 3-2 5-4 7-7 1-3 1-7 0-9 -1-2-3-3-6-2 -2 1-5 2-8 3 0-2-1-4-1-6l0 0c3 1 5 1 6 1 2-1 2-3 3-9 2-7 5-18 9-30 4-12 10-25 13-41 3-14 4-30 8-37 1 4 1 8 1 11C246 308 246 319 247 327L247 327zM378 170c-4-1-9-1-17-1 -1 0-3 0-4 0 -1-4 0-8-2-8 -2-1-8 1-15 0 0 0-1 0-1 0 0-1 1-5 1-6 3 1 6 0 8 0 3-1 4-3 6-6 2-3 2-3 4-7 2-4 4-8 5-13 2-5 3-12 3-21 0-1 0-2 0-3l0 0c1 0 2 0 3 1 1 3 3 6 5 8 3 4 7 8 9 12 2 4 2 9 4 12 2 3 6 5 8 6 3 2 4 3 5 4 0 1 0 3-1 4s-2 2 0 6c1 3 5 9 9 18 4 9 8 21 7 23 -1 2-8-6-13-12 -5-6-9-9-11-12 -3-2-5-4-8-4C381 170 379 170 378 170z"/>
  </g>
</svg>
</div>

Источник ответа:@ccprog

Доработана вёрстка, взят другой svg образ, добавлена картинка фона @Alexandr_TT

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.