Как можно создать вращающуюся рамку в css, которая будет обрезать изображение?

Question

Это должно выглядеть как на изображении ниже, но кроме того необходимо, чтобы при наведении эта рамка сложной формы вращалась на 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;
}
``` этот способ я сам не понял, но попробовал, однако все так-же не работает.

Answer 1

Обычный 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>

Answer 2

необходимо, чтобы при наведении эта рамка сложной формы вращалась на 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>

Answer 3

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>

БЛОГ НА HUSL

Как можно создать вращающуюся рамку в css, которая будет обрезать изображение?

Ответы (3 шт):

mask SVG