<p>CSS псевдокласс <code>:active</code> используется для определения стиля элемента во время активации. Этот псевдокласс применяется к элементу, когда он находится в процессе выполнения некоторого действия пользователем, например, когда на элемент нажимают мышью или прикосновением на сенсорном устройстве.</p>
<p>Одним из самых распространенных примеров использования псевдокласса <code>:active</code> является изменение цвета фона или текста кнопки при её нажатии. Рассмотрим пример:</p>
<pre><code class="html"><button class="btn">Нажми меня</button></code></pre>
<pre><code class="css">.btn:active {<br/> background-color: red;<br/> color: white;<br/>}</code></pre>
<p>В этом примере мы применяем стили к элементу с классом "btn" только во время его активации. Когда кнопку нажимают, её фоновый цвет становится красным, а текст становится белым. Это создает эффект обратной связи, позволяющий пользователю видеть, что кнопка была нажата.</p>
<p>Псевдокласс <code>:active</code> также может быть использован для анимации элементов. Рассмотрим следующий пример:</p>
<pre><code class="html"><div class="box"></div></code></pre>
<pre><code class="css">.box {<br/> width: 100px;<br/> height: 100px;<br/> background-color: blue;<br/> transition: width 0.3s, height 0.3s;<br/>}<br/><br/>.box:active {<br/> width: 200px;<br/> height: 200px;<br/>}</code></pre>
<p>В этом примере мы создаем простой квадрат, который при активации увеличивается в размере. При нажатии на элемент, его ширина и высота увеличиваются до 200px, а благодаря использованию свойства transition мы получаем плавное анимированное изменение размера.</p>
<p>Кроме того, псевдокласс <code>:active</code> может быть использован для изменения стилей элементов в контексте других действий пользователя. Например, его можно применить к ссылкам, чтобы указать на то, что пользователь нажал на ссылку и она активна. Рассмотрим следующий пример:</p>
<pre><code class="html"><a href="#" class="link">Нажми меня</a></code></pre>
<pre><code class="css">.link:active {<br/> color: red;<br/> text-decoration: underline;<br/>}</code></pre>
<p>В этом примере при активации ссылки, её цвет становится красным, а также появляется подчеркивание, показывая, что ссылка была нажата.</p>
<p>Как видно из приведенных примеров, псевдокласс <code>:active</code> является очень полезным инструментом для создания интерактивных элементов на веб-странице. Он позволяет изменять стили элементов при их активации и может использоваться для различных эффектов и анимаций, улучшая пользовательский опыт.</p>