7

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

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

11
  • canvas || SVG...
    – Air
    12 мар 2020 в 5:05
  • 1
    а если курсор осановить внутри - анимация будет дальше продолжаться ? 12 мар 2020 в 5:05
  • Ждёмс еще ответов более точных. :)
    – Randall
    12 мар 2020 в 5:32
  • 1
    @MaximLensky да видно что то не доработано.Но к сожалению в SVG я не разбираюсь чтобы точно сказать что и как это исправить.
    – Randall
    12 мар 2020 в 5:55
  • 1
    @MaximLensky "Максимка" - что за фамильярность - (Сашку ждём )?? Мне, по крайней мере, так не нравится 25 мар 2020 в 6:24

2 ответа 2

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>

2
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>

Ваш ответ

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

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