Background zoom [требует правки]

232

15 августа 2017, 14:38

Здравствуйте. Я новичок, и хотелось понять, как работает этот зум. Вот на этом сайте я увидел это: http://hq-ds.com/ Подскажите, возможно ли сделать это на css animation, или без js не обойтись? Буду благодарен за ответ.

Answer 1

возможно ли сделать это на css animation, или без js не обойтись?

Возможно, например, с использованием keyframes.

#mf { 
  background: url(http://jhealth.ru/wp-content/uploads/2013/11/megan-fox-sexy-photo.jpg); 
  background-repeat: no-repeat; 
  width:375px; 
  height:375px; 
  z-index:5; 
  position:absolute; 
 
  
  -webkit-animation: mfox 5s ease-in-out infinite alternate; 
  animation: mfox 5s ease-in-out infinite alternate; 
} 
 
@-webkit-keyframes mfox { 
  0% { 
    -webkit-transform: scale(0.5); 
  } 
  100% { 
    -webkit-transform: scale(1.2); 
  } 
} 
 
@keyframes mfox { 
  0% { 
    transform: scale(0.5); 
  } 
  100% { 
    transform: scale(1.2); 
  } 
}