2

Здравствуйте знатоки CSS. Подскажите, можно сделать такую "фигуру" без PNG, суть в том что задний вон меняется каждые 5 секунд.

Логотип

2
  • 3
    А зачем на CSS, если вполне можно и на PNG?) Наложить прозрачный png-трафарет поверх заднего фона да и всё
    – andreymal
    18 дек 2020 в 14:58
  • Хотя конечно и на css+svg можно творить чудеса htmlbook.ru/blog/maskirovanie-v-css
    – andreymal
    18 дек 2020 в 15:00

2 ответа 2

3

Можно использовать css-маску. Синтаксис как у свойства background.
Вместо data-url можно использовать обычный url, градиент и т.п.

.pseudo-slider{
  -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgyLjEiIGhlaWdodD0iMjE2LjEiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE4Mi4xIDIxNi4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgoJPHBhdGggZD0ibTYxLjk1IDE4Ny45Yy0zMi4zNi0zMS4yNC0zOC44OC0zOC4xLTQ1LjkzLTQ4LjMyLTE4LjkzLTI3LjQ4LTIxLjE3LTU5LjI0LTYuMjczLTg5LjE4IDQuNjU0LTkuMzU2IDkuNjQ5LTE2LjE5IDE3LjQyLTIzLjg0IDExLjUxLTExLjMyIDI1LjYxLTE5LjMzIDQxLjQzLTIzLjUzIDcuNjY2LTIuMDMyIDEwLjM1LTMuMDA1IDIyLjIzLTMuMDA1IDExLjg5IDAgMTQuNyAwLjk3MiAyMi4zNyAzLjAxIDE0LjI2IDMuNzg3IDMwLjUgMTIuNTIgMzguNDcgMjAuNjdsMy40MTcgMy40OTktMzQuNzkgMzQuMTgtMy4zMTctMi4yNWMtMS40OTMtMS4yNTYtNC43MjQtMy4zMDUtNy4xODEtNC41NTMtMTYuNjgtOC40NzUtMzYuNDMtNS4wMTQtNDkuMDIgOC41OTEtNy41OTggOC4yMDYtMTAuOTIgMTYuOC0xMC45NiAyOC4zOC0wLjAzOTUgMTEuNDIgNC4yMTggMjEuMTMgMTIuODkgMjkuNDEgOC4xOTIgNy44MTQgMTYuNzEgMTEuMiAyOC4xOSAxMS4yIDExLjQ4IDAgMjAtMy4zODYgMjguMTktMTEuMiA3LjUzMS03LjE4MyAxMS42LTE1LjEzIDEyLjgxLTI1LjAxbDAuNTQ0Mi00LjQ1OCA0OS42Ny0wLjQ2NS0wLjU2NzUgNy4yMjljLTEuMzA4IDE2LjY2LTYuNDYgMzAuMDgtMTYuODggNDMuOTYtNS45NDkgNy45MjQtMzAuOTQgMzMuMzgtNTguNTkgNTkuNjdsLTE0LjkzIDE0LjJ6Ii8+Cjwvc3ZnPgo=) no-repeat center/contain;
}

.pseudo-slider{
  width: 182px;
  height: 216px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: gray;
  animation: slider 3s linear infinite;
}
@keyframes slider{
  0%{
    background-image: url(https://www.placecage.com/200/300);
  }
  50%{
    background-image: url(https://www.placecage.com/c/200/300);
  }
  100%{
    background-image: url(https://www.placecage.com/200/300);
  }
}
<div class="pseudo-slider"></div>

4
  • круто, большое спасибо! 18 дек 2020 в 19:31
  • в файерфоксе работает но только плавности нету .. 18 дек 2020 в 22:06
  • 1
    @MaximLensky в фаерфоксе смена background-image не анимируется. Печально, но ничего не поделать. Да и смена эта в ответе сугубо демонстративная, чтобы соответствовать условию вопроса. Наверняка у ТС-а она организована другим способом.
    – zhurof
    19 дек 2020 в 6:37
  • плюсик я всё равно поставил 19 дек 2020 в 6:51
1

кривоватенько получилось

.mask {
  position: relative;
  
  width:  300px;
  height: 300px;
  
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  
  overflow: hidden;
}

.mask:after {
  content:  '';
  
  position: absolute;
  z-index: 1;
  left: 0px;
  bottom:  0px;

  width: 0;
  height: 0;
  border-bottom: 150px solid white;
  border-right: 150px solid transparent;
}

.mask:before {
  content:  '';
  
  position: absolute;
  z-index: 1;
  right: 0px;
  bottom:  0px;

  width: 0;
  height: 0;
  border-bottom: 150px solid white;
  border-left: 150px solid transparent;
}

.gap {
  position: absolute;
  left:     calc(50% - 50px);
  top:      calc(40% - 50px);
  
  z-index:  1;
  
  width:    100px;
  height:   100px;
  
  border-radius:  50%;

  background: white;  
}

.gap:after {
  content:  '';

  position: absolute;
  left:    calc(50%);
  top:     -75px;
  
  z-index:  1;
  
      width: 0;
      height: 0;
      border-top: 100px solid transparent;
      border-right: 200px solid white;
      border-bottom: 100px solid transparent;  
      
      transform: rotate(-15deg);
}

.mask img {
  height:  100%
}
<div class = 'mask'><div class = 'gap'></div><img src = 'https://сезоны-года.рф/sites/default/files/images/journal/quotes.jpg'></div>

1
  • большое вам спасибо 18 дек 2020 в 19:29

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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