1

есть картинка на задний фон нужно что бы при загрузки страницы она появлялась медленно а через 0.5s после этого была анимация градиентого блюра центра картинки .

css селектора изображения:

.picture {
    position: center;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
 }

 @-webkit-keyframes fadeIn {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }

 @keyframes fadeIn {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }
7
  • а что значит "появлялась медленно"? могли бы Вы уточнить? 1 июл 2020 в 11:22
  • ну я решил это так: .picture { position: center; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }
    – user351732
    1 июл 2020 в 11:23
  • так поместите всю логику анимации в один keyframe - от 0% до 50% будет анимация для opacity, от 50% до 100% для blur 1 июл 2020 в 11:31
  • Извините, не совсем понимаю как это сделать, и насколько я понимаю будет обычный blur а не градиентный как я его представляю вот как это в теории должно выглядеть: центр картинки blur и ближе к краям картинки blur постепенно пропадает. Прошу написать код, если не затруднит, всвязи с моими скудными знаниями в этой области, но я старательно учусь! =)
    – user351732
    1 июл 2020 в 11:38
  • 1
    А вы покажите css для центр картинки blur и ближе к краям картинки blur постепенно пропадает. А вам прикрутят анимацию ) 1 июл 2020 в 13:19

2 ответа 2

4

Судя по вашим коментариям вы сами способны сделать CSS-анимации. Что касается радиального-размытия, то здесь вам придется использовать специальные маски и фильтры, которые можно построить на основе SVG, если хотите, чтобы работало во всех современных браузерах. Ниже приведен пример радиального-размытия, который работает в Edge, Firefox и Webkit-браузерах. Однако правильную анимацию такого размытия средствами чистого CSS пожалуй не сделать (по крайней мере я не знаю как), но средствами JS-анимации можно. Ежели нужно чисто CSS-решение, то можно просто плавно убирать прозрачность у фильтра (но это не будет анимацией самого размытия). Ниже приведен пример такой анимации по наведению курсора мыши (hover). Я полагаю, адаптировать этот код под ваши нужды не составит большого труда:

.effect {
  width: 400px; height: 300px;
}

.effect img{
  position: absolute;
}

.filter {
  -webkit-mask: radial-gradient( closest-side at center, transparent 0%, black 100%);
  mask: url('#mask-radial');
  filter: url('#radial-filter');
  transition: opacity 1s ease;
  opacity: 1;
}

.filter:hover {
  opacity: 0;
}
<div class="effect">
  <img src="http://css3create.com/squelettes/images/articles/flou-localise-1.jpg" alt="" />
  <img class="filter" src="http://css3create.com/squelettes/images/articles/flou-localise-1.jpg" alt="" />
</div>

<svg height="0">
  <defs>
    <mask id="mask-radial">
      <rect width="400" height="300" fill="url(#radgrad)"></rect>
      <radialGradient id="radgrad" cx="50%" cy="50%" r="50%">
        <stop stop-color="black" offset="0%"/>
        <stop stop-color="white" offset="100%"/>
      </radialGradient>
    </mask>
    <filter id="radial-filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
    </filter>
  </defs>
</svg>

3

Хвала современному CSS. Что тут происходит: размещаем поверх картинки блок, накидываем на него маску и backdrop-filter, анимируем.

.pic {
  position: relative;
  width: 300px;
  height: 300px;
}

.pic__masked {
  -webkit-mask: radial-gradient(closest-side at center, black 50%, transparent 100%);
  mask: radial-gradient(closest-side at center, black 50%, transparent 100%);
  position: absolute;
  left: 0;
  top: 0;
  backdrop-filter: blur(10px);
  width: 100%;
  height: 100%;
  animation: 3s linear 0s infinite alternate blurScale;
}

@keyframes blurScale {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
<div class="pic">
  <img src="https://placeimg.com/300/300/people" alt="">
  <div class="pic__masked"></div>
</div>

1
  • у backdrop-filter плохая поддержка браузерами, но идея хорошая, +
    – meine
    2 июл 2020 в 19:44

Ваш ответ

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