Здравствуйте знатоки CSS. Подскажите, можно сделать такую "фигуру" без PNG, суть в том что задний вон меняется каждые 5 секунд.
2 ответа
Можно использовать 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>
-
-
-
1@MaximLensky в фаерфоксе смена
background-image
не анимируется. Печально, но ничего не поделать. Да и смена эта в ответе сугубо демонстративная, чтобы соответствовать условию вопроса. Наверняка у ТС-а она организована другим способом.– zhurof19 дек 2020 в 6:37 -
кривоватенько получилось
.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>