Анимированные иконки социальных сетей на CSS

Анимированные иконки социальных сетей — это простой способ оживить дизайн вашего сайта и привлечь внимание пользователей. Этот проект демонстрирует, как стандартные SVG-иконки можно превратить в интерактивные элементы с помощью CSS-анимаций.

Каждая иконка реагирует на наведение курсора, создавая эффект "оживания", что делает ваш интерфейс более современным и привлекательным. Анимации выполнены на чистом CSS, без использования jаvascript, что обеспечивает быструю загрузку и хорошую производительность.

Данный набор идеально подходит для размещения на веб-сайтах, блогах, лендингах и других проектах, где требуется продемонстрировать ссылки на социальные сети стильно и профессионально.

Создайте динамичный и современный интерфейс, который выделит ваш проект среди остальных!

See the Pen Social media icon #5 by Nick (@OfigenusMaximus) on CodePen.

        HTML

  
  Показать код HTML
  
    
  <ul>
    <li><a href="#"><i class="fa-brands fa-instagram instagram"></i></a></li>
    <li><a href="#"><i class="fa-brands fa-whatsapp whatsapp"></i></a></li>
    <li><a href="#"><i class="fa-brands fa-twitter twitter"></i></a></li>
</ul>

        CSS
 
  
  Показать код CSS
  
         
*{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #000;
    }
 
    ul {
        position: relative;
        display: flex;
    }
    ul li {
        position: relative;
        list-style: none;
        margin: 0 20px;
        cursor: pointer;
    }
    ul li a {
        text-decoration: none;
    }
    ul li a .fa-brands {
        font-size: 6em;
        color: #222;
    }
    ul li a::before {
        font-family: "FontAwesome";
        position: absolute;
        top: 0;
        left: 0;
        font-size: 6em;
        height: 0;
        overflow: hidden;
        transition: 0.5s ease-in-out;
    }
 
    ul li:nth-child(1) a::before {
        content: "\f16d";
        background-image: linear-gradient(45deg, 
          #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,
          #bc1888 100%);
        -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
        border-bottom: 4px solid #dc2743;
    }
    ul li:nth-child(2) a::before {
        content: "\f232";
        color: #25D366;
        border-bottom: 4px solid #25D366;
    }
    ul li:nth-child(3) a::before {
        content: "\f099";
        color: #1DA1F2;
        border-bottom: 4px solid #1DA1F2;
    }
    ul li:hover a::before {
        height: 100%;
    }