Как реализовать или поддерживает эффект сжатия значков HTML5/CSS3?

Я смотрел веб-страницу http://www.cuttherope.net в текущем Google Chrome 38.0.x и увидел, что в середине страницы есть 4 значка. Когда мышь над ним, у него есть эффект сжимания значка: как будто значок - пудинг или желе, сжатый сбоку рукой, а затем снова возвращающийся к своему естественному размеру.Как реализовать или поддерживает эффект сжатия значков HTML5/CSS3?

Интересно, как это делается: это HTML5/CSS3 или как это сделать. Я видел это div

<div class="game-icon resize"></div>

и если я использую инструмент для разработчиков, чтобы установить display: none на него, то значок исчезнет, и иметь ничего показ, так что это должно быть div, показывающий эффект, но если я исследую вычисляемые значения, я вижу значок в качестве фона, но все вычисленные значения не меняются, когда мышь находится над ним или из него. Как это делается и является ли это частью новых возможностей HTML5/CSS3?

(если отключить JavaScript и перезагрузить страницу, эффект все равно будет работать, поэтому, по-видимому, это не выполняется JavaScript).

источник

2014-11-14 太極者無極而生

Черт, я удивлен, что он работает без этого JS. На расследование! – Ludwik

Да, это часть возможностей CSS3 (в основном transform)

Если вы хотите иметь такой же эффект без необходимости вручную кодировать его, посмотрите на это: http://daneden.github.io/animate.css/

Вы можете легко анимировать элемент, просто добавив к нему два класса.

источник

2014-11-14 15:53:52 Drown

@ Метод Людвика '-webkit-animation' действительно показывает этот эффект, и я буду смотреть в' transform' next. Раньше я делал «переход» и задавался вопросом, может ли он достичь подобных вещей, но я думаю, что «переход» фактически изменит значения на разные значения внутри инструмента разработчика –

Найденный! Да, это CSS3, и, в частности, свойство [-webkit-]animation: resize 0.2s linear;. Отключите этот, и эффект прекратится.

источник

2014-11-14 15:56:54 Ludwik

, что интересно. Если я устанавливаю '-webkit-animation: изменение размера 1s linear;' на Chrome, то я вижу, что он сжимается сразу. Но 'animation: resize 1s linear;' не будет иметь никакого эффекта вообще –

Я предполагаю, что это идет что-то вроде этого:

img:hover { 
 
    -webkit-animation: squeeze 0.5s; 
 
    animation: squeeze 0.5s; 
 
} 
 

 
@-webkit-keyframes squeeze{ 
 
    0% { transform: scale(1, 1); } 
 
    50% { transform: scale(1.1, 0.9); } 
 
    100% { transform: scale(1, 1); } 
 
} 
 

 
@keyframes squeeze{ 
 
    0% { transform: scale(1, 1); } 
 
    50% { transform: scale(1.1, 0.9); } 
 
    100% { transform: scale(1, 1); } 
 
}

<img src="http://placehold.it/100x100">

источник

2014-11-14 16:35:54 Turnip

CSS-другие ответы указали

.resize:hover { 
    -webkit-animation: resize 0.2s linear; 
    animation: resize 0.2s linear; 
}

Ссылки следующей Анимации по ключевым кадрам, который находится в другом месте в CSS

@-webkit-keyframes resize { 
    0% { -webkit-transform:scale(1, 1) } 
    50% { -webkit-transform:scale(1.1, 0.9) } 
    100% { -webkit-transform:scale(1, 1) } 
} 

@keyframes resize { 
    0% { transform:scale(1, 1) } 
    50% { transform:scale(1.1, 0.9) } 
    100% { transform:scale(1, 1) } 
}

Имя resize является то, что связывает два - это не ключевое слово - вы могли бы назвать его boing и использовать

animation: boing 0.2s linear; 
... 
@keyframes boing {

Etc.

Ключевые кадры говорят

в начале , шкала до 100% x 100%
50% через анимацию, масштаб до 110% x 90%
в конце концов, урезанию до 100% х 100%

И 0.2s в animation собственности говорит ей занять 0,2 секунды, чтобы сделать всю анимацию. Анимация начинается, как только применяется стиль, в этом случае, когда вы наводите курсор.

источник

2014-11-14 16:38:18 CupawnTae

Как реализовать или поддерживает эффект сжатия значков HTML5/CSS3?

ответ

Смежные вопросы