Как повернуть клип путь без поворота изображения? - PullRequest
Новая
       18

Как повернуть клип путь без поворота изображения?

0 голосов
/ 24 июня 2018

У меня есть изображение с CSS-свойством clip-path.Я добавил анимацию для поворота пути клипа.Я хочу вращать только путь клипа, а не изображение.Из приведенного ниже кода вы можете получить представление о том, чего я хочу достичь.Я сделал это, чтобы дать вам представление о том, чего я хочу достичь.Проблема с моим кодом в том, что на ручное задание точек пути клипа на каждом ключевом кадре уходит много времени.Так есть ли какой-нибудь короткий метод для достижения приведенного ниже результата кода без изменения точек вручную на ключевых кадрах?Я хочу, чтобы он был плавным, что довольно сложно установить вручную, задавая точки.(Имейте в виду, мне не нужна последняя анимация, которая делает изображение невидимым, я не могу понять, почему это происходит. 

#profile-img {
    width: 15%;
    margin: 5%;
    -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    animation: clipRotateAnim 2s linear infinite;
}

@keyframes clipRotateAnim {
    0% {
        -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
        clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    }
    
    25% {
        -webkit-clip-path: polygon(100% 23%, 80% 0, 47% 34%, 16% 0, 0 19%, 26% 53%, 0 78%, 19% 100%, 51% 71%, 76% 100%, 100% 81%, 68% 51%);
        clip-path: polygon(100% 23%, 80% 0, 47% 34%, 16% 0, 0 19%, 26% 53%, 0 78%, 19% 100%, 51% 71%, 76% 100%, 100% 81%, 68% 51%);
    }
    50% {
        -webkit-clip-path: polygon(84% 100%, 100% 75%, 64% 56%, 100% 13%, 81% 0, 49% 28%, 22% 0, 0 29%, 28% 57%, 0 83%, 21% 100%, 42% 74%);
        clip-path: polygon(84% 100%, 100% 75%, 64% 56%, 100% 13%, 81% 0, 49% 28%, 22% 0, 0 29%, 28% 57%, 0 83%, 21% 100%, 42% 74%);
    }
    100% {
        -webkit-clip-path: polygon(27% 0, 0 19%, 29% 49%, 0 79%, 19% 100%, 45% 76%, 84% 100%, 100% 80%, 69% 56%, 100% 18%, 80% 0, 47% 33%);
        clip-path: polygon(27% 0, 0 19%, 29% 49%, 0 79%, 19% 100%, 45% 76%, 84% 100%, 100% 80%, 69% 56%, 100% 18%, 80% 0, 47% 33%);

    }
 
}
<img id="profile-img" src="https://images.pexels.com/photos/1025804/pexels-photo-1025804.jpeg?auto=compress&cs=tinysrgb&h=350">

1 Ответ

0 голосов
/ 24 июня 2018

Используйте изображение в качестве фона псевдоэлемента и поверните его в противоположном направлении: 

.image {
    width:200px;
    height:200px;
    margin: 20px;
    -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    animation: clipRotateAnim 2s linear infinite;
    position:relative;
    overflow:hidden;
}
.image:before {
  content:"";
  position:absolute;
  top:-10%;
  bottom:-10%;
  left:-10%;
  right:-10%;
  background:var(--i) center/cover;
  animation: clipRotateAnim 2s linear infinite reverse;
}
@keyframes clipRotateAnim{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}
<div class="image"  style="--i:url(https://images.pexels.com/photos/1025804/pexels-photo-1025804.jpeg?auto=compress&cs=tinysrgb&h=350)">
</div>

Еще одна идея, которую следует избегать clip-path, - это использовать фон для создания другого слоя над вращающимся изображением. В этом случае у вас не будет прозрачности, но у вас будет лучшая поддержка браузера. 

.image {
    width:200px;
    height:200px;
    margin: 20px;
    position:relative;
   background:var(--i) center/cover;
   overflow:hidden;
}
.image:before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  box-shadow:0 0 200px 200px #fff;
  background-image:
    linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
  background-size:calc(50% - 30px) calc(50% - 30px);
  background-position:top left,top right,bottom left,bottom right;
  background-repeat:no-repeat;
  animation: clipRotateAnim 2s linear infinite;
}
@keyframes clipRotateAnim{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}
<div class="image"  style="--i:url(https://images.pexels.com/photos/1025804/pexels-photo-1025804.jpeg?auto=compress&cs=tinysrgb&h=350)">
  
</div>
...