7

подскажите пожалуйста как сделать такой элемент + такую анимацию

введите сюда описание изображения

Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384
Dan
  • 2,191
  • canvas || SVG... – Air Mar 12 '20 at 05:05
  • 1
    а если курсор осановить внутри - анимация будет дальше продолжаться ? – Резидент Казахстана Mar 12 '20 at 05:05
  • Ждёмс еще ответов более точных. :) – Randall Mar 12 '20 at 05:32
  • @ИзбытокСусликов Сашку ждём ? Или надо пояснить откуда я всё это взял ? – Резидент Казахстана Mar 12 '20 at 05:40
  • @MaximLensky нет не надо ничего пояснить.Я тоже хотель год назад сделать такую анимации как на гиф проста как всегда поленился.По этому было бы отлично увидеть реализацию ответа как на гиф.(желательно без svg) – Randall Mar 12 '20 at 05:45
  • @ИзбытокСусликов а я вот не знаю как остановить анимацию когда выхожу за пределы path – Резидент Казахстана Mar 12 '20 at 05:46
  • @MaximLensky Js в студию – Randall Mar 12 '20 at 05:47
  • @ИзбытокСусликов path.onmouseout нее работает, разумеется что переменную path я объявлял и если так пишу то анимация дёргаться начинает ..что мне не нравится – Резидент Казахстана Mar 12 '20 at 05:48
  • 1
    @MaximLensky да видно что то не доработано.Но к сожалению в SVG я не разбираюсь чтобы точно сказать что и как это исправить. – Randall Mar 12 '20 at 05:55
  • 1
    @MaximLensky "Максимка" - что за фамильярность - (Сашку ждём )?? Мне, по крайней мере, так не нравится – Alexandr_TT Mar 25 '20 at 06:24
  • @Alexandr_TT тут проблемы с интернетом, когда вернусь поговорим, но написал я не со зла – Резидент Казахстана Mar 26 '20 at 01:10

2 Answers2

4

Не точное совпадение но делается это так 

<svg viewBox="0 100 200 200" width="500">

<path d="m 177.64882,197.97025 c 0,37.99259 -34.43744,68.79166 -76.91816,68.79166 -42.480725,0 -69.159579,-31.59971 -76.91816,-68.79166 -5.381144,-25.79534 24.948217,-47.28279 76.91816,-68.79167 39.25182,-16.24521 76.91816,30.79908 76.91816,68.79167 z" fill="none" stroke="blue" stroke-width="1">
             <animate 
            attributeName="d"
            values="m 177.64882,197.97025 c 0,37.99259 -34.43744,68.79166 -76.91816,68.79166 -42.480725,0 -69.159579,-31.59971 -76.91816,-68.79166 -5.381144,-25.79534 24.948217,-47.28279 76.91816,-68.79167 39.25182,-16.24521 76.91816,30.79908 76.91816,68.79167 z;M 184.45239,225.94049 C 173.03174,278.83237 67.074145,275.70093 40.254469,255.8006 26.83666,245.84452 -5.7594918,188.00429 17.764881,173.02382 59.881982,146.20338 79.246735,139.07933 123.78721,131.44644 c 97.53788,-16.71505 68.22409,59.48688 60.66518,94.49405 z;m 177.64882,197.97025 c -0.35166,37.99096 -34.43744,68.79166 -76.91816,68.79166 -42.480725,0 -69.15947,-31.59973 -76.91816,-68.79166 -5.381253,-25.79548 15.606755,-78.27985 76.91816,-68.79167 42.69554,6.6073 77.21723,36.48143 76.91816,68.79167 z;m 177.64882,197.97025 c -27.05429,33.14413 -44.89336,66.81351 -76.91816,68.79166 -42.399915,2.61901 -69.15947,-31.59973 -76.91816,-68.79166 -5.381253,-25.79548 15.83044,-57.95634 76.91816,-68.79167 47.98717,-8.51164 99.56499,41.04711 76.91816,68.79167 z;m 177.64882,197.97025 c -11.42065,52.89188 -50.09848,88.69199 -76.91816,68.79166 -13.417809,-9.95608 -60.451612,-46.28248 -76.91816,-68.79166 -18.7497411,-25.63023 9.949479,-74.61404 99.97471,-66.52381 98.56255,8.85745 61.42052,31.51664 53.86161,66.52381 z ;m 177.64882,197.97025 c -11.42065,52.89188 -43.52204,68.65952 -76.91816,68.79166 -42.439949,0.16792 -64.905386,-56.60574 -76.91816,-68.79166 -19.2149502,-19.4919 15.20879,-73.7357 76.91816,-68.79167 98.64366,7.90312 84.47707,33.7845 76.91816,68.79167 z;m 177.64882,197.97025 c 0,37.99259 -34.43744,68.79166 -76.91816,68.79166 -42.480725,0 -69.159579,-31.59971 -76.91816,-68.79166 -5.381144,-25.79534 24.948217,-47.28279 76.91816,-68.79167 39.25182,-16.24521 76.91816,30.79908 76.91816,68.79167 z"
            dur="4s"
            begin="mousemove"
            repeatCount="indefinite"/>


</path>
</svg>
Резидент Казахстана
  • 13,519
4

подскажите пожалуйста как сделать такой элемент + такую анимацию

В этом топике очень подробно, с картинками рассказывается, как делается это:

Плавный морфинг одного path в другой path

Анимация начинается /заканчивается при наведении курсора на овал.
При наведении на текст - анимация тени надписи: Explore HOTEL 

 begin="oval.mouseover"
  end="oval.mouseout"
   repeatCount="4"
     dur="5s"

Ниже полный код: 

.container {
width: 50vw;
height:50vh;
}
 #txt1 {

fill:gray;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.4s; 
  transform-origin: center;
  transform-box: fill-box;


}


#txt1:hover {
    fill:white;
 pointer-events:fill;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0px 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
 transform: scale(1.5);


}
<div class="container">
<svg viewBox="0 0 400 400" >

  <path id="oval" d="m380.5 199.3c0 26.4-4.7 59.3-29.6 71.6-36.8 18.2-39.9 17.3-69 27.6-24.1 8.6-53.3 14.7-81.2 21.2-28.3 6.6-45.5 5.7-75.5 7.9-30.7 2.2-47.3 7-77.4-7.8-26-12.8-31-19.5-31-46.9 0-25.1 12.2-55.1 29.2-75 18.8-22 51-65.9 81.7-94.9 16.7-15.7 24.8-23.5 71.8-34.4 50.8-11.8 55.2 4.7 79.1 13.1 29.6 10.4 54.7 26.4 72.5 46.2 18.6 20.5 29.3 45 29.3 71.3z" fill="transparent" stroke="#d3d3d3" stroke-width="5" cursor="pointer">
             <animate 
            attributeName="d"
            values="
   m380.5 199.3c0 26.4-4.7 59.3-29.6 71.6-36.8 18.2-39.9 17.3-69 27.6-24.1 8.6-53.3 14.7-81.2 21.2-28.3 6.6-45.5 5.7-75.5 7.9-30.7 2.2-47.3 7-77.4-7.8-26-12.8-31-19.5-31-46.9 0-25.1 12.2-55.1 29.2-75 18.8-22 51-65.9 81.7-94.9 16.7-15.7 24.8-23.5 71.8-34.4 50.8-11.8 55.2 4.7 79.1 13.1 29.6 10.4 54.7 26.4 72.5 46.2 18.6 20.5 29.3 45 29.3 71.3z;

   m378.1 222.6c0 26.4-4.7 59.3-29.6 71.6-36.8 18.2-35.1 15.5-67.2 17.4-25.6 1.6-53.3-28.4-81.2-21.9-28.3 6.6-44.9 35.7-74.9 37.8-30.7 2.2-46.7-44.5-76.8-59.3-26-12.8-31-19.5-31-46.9 0-25.1 23-29.4 40-49.3 18.8-22 9-40.8 39.8-69.7 16.7-15.7 57.2 11.3 104.2 0.3 50.8-11.8 53.4-29.4 77.3-21.1 29.6 10.4 27.1 61.8 45 81.6 18.6 20.5 54.5 33 54.5 59.3z;

   m382.3 169.3c0 26.4-23.7 11.1-29.6 71.6-1 10.1 38 112.4-74.9 30.6-20.8-15-76 53.1-104 59.6-28.3 6.6-34.1-35-64.1-32.9-30.7 2.2-34.2-2.5-61.2-29.9-20.3-20.6 11.5-53.6 11.5-81 0-25.1-13-39 4-58.9 18.8-22 56.4 19.8 87.1-9.2 16.7-15.7 2.7-26.5 49.6-37.4 50.8-11.8 55.2 22.1 79.1 30.5 29.6 10.4 19.8 7.9 48-2.3 26-9.4 54.5 33 54.5 59.3z;

   m380.5 199.3c0 26.4-4.7 59.3-29.6 71.6-36.8 18.2-39.9 17.3-69 27.6-24.1 8.6-53.3 14.7-81.2 21.2-28.3 6.6-45.5 5.7-75.5 7.9-30.7 2.2-47.3 7-77.4-7.8-26-12.8-31-19.5-31-46.9 0-25.1 12.2-55.1 29.2-75 18.8-22 51-65.9 81.7-94.9 16.7-15.7 24.8-23.5 71.8-34.4 50.8-11.8 55.2 4.7 79.1 13.1 29.6 10.4 54.7 26.4 72.5 46.2 18.6 20.5 29.3 45 29.3 71.3z"

            begin="oval.mouseover"
   end="oval.mouseout"
            repeatCount="4"
   dur="5s"/> 
         <animate attributeName="stroke" dur="5s" begin="oval.mouseover" end="oval.mouseout" values = "red;dodgerblue;green;gold;red" repeatCount="10" />   

  </path>  
    <text id="txt1" font-size="24px" x="220" y="50%"  text-anchor="middle"  >Explore HOTEL</text> 
</svg>
</div>
Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384