5

Само изображение и рамка выглядят таким образом.

Это должно выглядеть как на изображении ниже, но кроме того необходимо, чтобы при наведении эта рамка сложной формы вращалась на 360 градусов.(изображение животного имеет прямоугольную форму и размеры больше размеров рамки) Я пробовал это сделать следующим образом:

1)

HTML

<div class="img-wrapper">
  <img src="assets/img/pets-in-zoo/panda.svg" alt="panda" class="pet-pic">
</div>
CSS

.img-wrapper {
   width: 331.9px;
   background: url(assets/img/pets-in-zoo/img-wrapper.svg);
   overflow: hidden;
}
HTML

<div class="img-wrapper">
</div>
CSS

.img-wrapper {
   width: 331.9px;
   background: url(assets/img/pets-in-zoo/panda.svg) no-repeat center/cover;
   -webkit-image-mask: url(assets/img/pets-in-zoo/img-wrapper.svg);
}
HTML

<div class="img-wrapper">
</div>
CSS

.img-wrapper {
   width: 331.9px;
   background: url(assets/img/pets-in-zoo/panda.svg) no-repeat center/cover;
}
.img-wrapper::before {
  width:100%;
  height: 100%;
  background: url(assets/img/pets-in-zoo/img-wrapper.svg) no-repeat center/cover;
  mix-blend-mode: screen;
}
``` этот способ я сам не понял, но попробовал, однако все так-же не работает.
3

3 ответа 3

5

Обычный border-radius и ни какого svg

.item {
  width: 300px;
  height: 300px;
  border-radius: 49% 51% 50% 50% / 86% 32% 68% 14%;
  background: url(https://yt3.ggpht.com/a/AATXAJwNLWXw1UnVIqUZu9Kj3qEMX3HkXv7ry4NQq5W7=s900-c-k-c0xffffffff-no-rj-mo);
  background-size: cover;
  animation: move 5s linear infinite;
}

@keyframes move {
  0% {
    border-radius: 62% 38% 50% 50% / 27% 46% 54% 73%;
  }
  50% {
    border-radius: 62% 38% 80% 20% / 27% 69% 31% 73%;
  }
  75% {
    border-radius: 37% 63% 35% 65% / 66% 39% 61% 34%;
  }
  100% {
    border-radius: 62% 38% 80% 20% / 49% 39% 61% 51%;
  }
}
<div class="item"></div>

0
4

необходимо, чтобы при наведении эта рамка сложной формы вращалась на 360 градусов

Совсем простой вариант:

body{padding:0;overflow:hidden;}

.item {
  position: relative; overflow: hidden; width: 180px; height: 180px;
  border-radius: 120% 120% 170% 100% / 120% 120% 150% 150%;
  transition: transform 2s;
}

.item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: url(https://yt3.ggpht.com/a/AATXAJwNLWXw1UnVIqUZu9Kj3qEMX3HkXv7ry4NQq5W7=s900-c-k-c0xffffffff-no-rj-mo); background-size: cover;
  transition: transform 2s;
}

.item:hover {transform: rotate(360deg);}
.item:hover::before {transform: rotate(-360deg);}
<div class="item"></div>

Вариант чуть интереснее:

body{padding:0;overflow:hidden;}

.item {
  position: relative; overflow: hidden; width: 180px; height: 180px;
  border-radius: 120% 120% 170% 100% / 120% 120% 150% 150%;
  background: url(https://yt3.ggpht.com/a/AATXAJwNLWXw1UnVIqUZu9Kj3qEMX3HkXv7ry4NQq5W7=s900-c-k-c0xffffffff-no-rj-mo); background-size: cover;
  transition: transform 2s;
}

.it {
  content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px;
}

.it::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: url(https://yt3.ggpht.com/a/AATXAJwNLWXw1UnVIqUZu9Kj3qEMX3HkXv7ry4NQq5W7=s900-c-k-c0xffffffff-no-rj-mo); background-size: cover;
  transition: transform 2s;
}

.item:hover {transform: rotate(360deg);}
.it:hover::before {transform: rotate(-360deg);}
<div class="item"><div class="it"></div></div>

2

mask SVG

Создаем path по форме рамки, включаем его в SVG mask и обрезаем область изображения, которая находится вне маски.

<style>
.img {
mask:url(#msk);
}
</style>
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" version="1.1">
 <mask id="msk" > 
   <path id="p1" fill="white" d="M76.7 51.8C139.6 18.4 125.8 108.9 278.6 44 360.8 9.2 394.4 244.4 327.8 304.7 268.8 358.2 149.9 378 89.9 325.7 21 265.6-4 94.8 76.7 51.8Z" > 
   <animateTransform attributeName="transform" type="rotate" values="0 200 200;360 200 200" dur="4s" begin="svg1.mouseenter" end="svg1.mouseleave" /> 
  </path>
</mask> 

 <image class="img"  xlink:href="https://i.stack.imgur.com/MYOzh.jpg" width="100%" height="100%" /> 
</svg>

Вариант с полупрозрачным фоном

Добавляем в определение маски

<rect width="100%" height="100%" fill="red" />, что делает фон полупрозрачным

<style>
.img {
mask:url(#msk);
}
</style>
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" version="1.1">
 <mask id="msk" > 
   <rect width="100%" height="100%" fill="red" /> 
 <path id="p1" fill="white" d="M76.7 51.8C139.6 18.4 125.8 108.9 278.6 44 360.8 9.2 394.4 244.4 327.8 304.7 268.8 358.2 149.9 378 89.9 325.7 21 265.6-4 94.8 76.7 51.8Z" > 
   <animateTransform attributeName="transform" type="rotate" values="0 200 200;360 200 200" dur="4s" begin="svg1.mouseenter" end="svg1.mouseleave" /> 
  </path>
</mask> 

 <image class="img"  xlink:href="https://i.stack.imgur.com/MYOzh.jpg" width="100%" height="100%" /> 
</svg>

Ваш ответ

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

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