9 апреля, 2015 
Alexjc Сейчас все популярнее становятся интерактивные эффекты при щелчке, похожие на волны. Они помогают человеку ощутить все в реальности, как будто он и вправду касается рукой этого значка.
Данные эффекты еще сыры и работают только в браузерах нового поколения.
Мы взяли иконки из Font Awesome, а эффекты работают для кнопок:
|
1 2 3 4 |
<span class="tag"><<span class="keyword">button</span><span class="attribute"> class=<span class="value">"cbutton cbutton--effect-boris"</span></span>></span> <span class="tag"><<span class="keyword">i</span><span class="attribute"> class=<span class="value">"cbutton__icon fa fa-fw fa-play"</span></span>></span><span class="tag"></<span class="keyword">i</span>></span> <span class="tag"><<span class="keyword">span</span><span class="attribute"> class=<span class="value">"cbutton__text"</span></span>></span>Play<span class="tag"></<span class="keyword">span</span>></span> <span class="tag"></<span class="keyword">button</span>></span> |
Стилизация кнопок:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<span class="class">.cbutton</span> <span class="rules">{ <span class="rule"><span class="keyword">position</span>:<span class="value"> relative</span>;</span> <span class="rule"><span class="keyword">display</span>:<span class="value"> inline-block</span>;</span> <span class="rule"><span class="keyword">margin</span>:<span class="value"> <span class="number">1</span>em</span>;</span> <span class="rule"><span class="keyword">padding</span>:<span class="value"> <span class="number">0</span></span>;</span> <span class="rule"><span class="keyword">border</span>:<span class="value"> none</span>;</span> <span class="rule"><span class="keyword">background</span>:<span class="value"> none</span>;</span> <span class="rule"><span class="keyword">color</span>:<span class="value"> <span class="hexcolor">#286aab</span></span>;</span> <span class="rule"><span class="keyword">font-size</span>:<span class="value"> <span class="number">1.4</span>em</span>;</span> <span class="rule">transition:<span class="value"> color <span class="number">0.7</span>s</span>;</span> }</span> <span class="class">.cbutton</span><span class="class">.cbutton--click</span>, <span class="class">.cbutton</span>:focus <span class="rules">{ <span class="rule"><span class="keyword">outline</span>:<span class="value"> none</span>;</span> <span class="rule"><span class="keyword">color</span>:<span class="value"> <span class="hexcolor">#3c8ddc</span></span>;</span> }</span> <span class="class">.cbutton__icon</span> <span class="rules">{ <span class="rule"><span class="keyword">display</span>:<span class="value"> block</span>;</span> }</span> <span class="class">.cbutton__text</span> <span class="rules">{ <span class="rule"><span class="keyword">position</span>:<span class="value"> absolute</span>;</span> <span class="rule"><span class="keyword">opacity</span>:<span class="value"> <span class="number">0</span></span>;</span> <span class="rule">pointer-events:<span class="value"> none</span>;</span> }</span> <span class="class">.cbutton</span>::after <span class="rules">{ <span class="rule"><span class="keyword">content</span>:<span class="value"> <span class="string">''</span></span>;</span> <span class="rule"><span class="keyword">position</span>:<span class="value"> absolute</span>;</span> <span class="rule"><span class="keyword">top</span>:<span class="value"> <span class="number">50</span>%</span>;</span> <span class="rule"><span class="keyword">left</span>:<span class="value"> <span class="number">50</span>%</span>;</span> <span class="rule"><span class="keyword">margin</span>:<span class="value"> -<span class="number">35</span>px <span class="number">0</span> <span class="number">0</span> -<span class="number">35</span>px</span>;</span> <span class="rule"><span class="keyword">width</span>:<span class="value"> <span class="number">70</span>px</span>;</span> <span class="rule"><span class="keyword">height</span>:<span class="value"> <span class="number">70</span>px</span>;</span> <span class="rule"><span class="keyword">border-radius</span>:<span class="value"> <span class="number">50</span>%</span>;</span> <span class="rule"><span class="keyword">opacity</span>:<span class="value"> <span class="number">0</span></span>;</span> <span class="rule">pointer-events:<span class="value"> none</span>;</span> }</span> |
Анимация для JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<span class="comment">/* Эффект «Boris» */</span> .cbutton--effect-boris::after { background: rgba(<span class="number">111</span>,<span class="number">148</span>,<span class="number">182</span>,<span class="number">0.1</span>); } .cbutton--effect-boris.cbutton--click::after { animation: anim-effect-boris <span class="number">0.3</span>s forwards; } @keyframes anim-effect-boris { <span class="number">0</span>% { transform: scale3d(<span class="number">0.3</span>, <span class="number">0.3</span>, <span class="number">1</span>); } <span class="number">25</span>%, <span class="number">50</span>% { opacity: <span class="number">1</span>; } <span class="number">100</span>% { opacity: <span class="number">0</span>; transform: scale3d(<span class="number">1.2</span>, <span class="number">1.2</span>, <span class="number">1</span>); } } |
Наслаждаемся результатом:
Этот эффект используется, чтобы перейти в SVG clipPath, что поддерживает только Chrome.
Свойство стилей clip-path, для модуса «Stoja», действует далеко не в каждом браузере.
Цветовые изменения цветов в SVG не работают в мобильной версии Safari, поэтому цвета «Azra» и «Dajan» предстанут в неправильной гамме.
the coment is here
Posted in 