• Страница 1 из 1
  • 1
Форум » Веб-разработка » Структура кода HTML » Пульсирующая кнопка с контактами на CSS (Красивая анимация пульсирующей кнопки на чистом CSS)
Пульсирующая кнопка с контактами на CSS
Kosten
Дата: Понедельник, 2020-04-13, 08:50 | Сообщение 1
Оффлайн
Администраторы
Сообщений:26269
Награды: 61


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



HTML

Код
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <div>
        <input type="checkbox">
        <button><i class="fa fa-phone"></i></button>
        <ul>
            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
            <li><a href="#"><i class="fa fa-youtube"></i></a></li>
            <li><a href="#"><i class="fa fa-instagram"></i></a></li>
        </ul>
    </div>
</body>

</html>

CSS

Код
  html,
        body {
            height: 100%;
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
            overflow: hidden;
        }

        body {
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            -ms-align-items: center;
            align-items: center;
            justify-content: center;
        }

        div {
            display: inline-block;
            position: relative;
            transform: scale(1.3)
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        button {
            position: relative;
            z-index: 1;
            outline: 0;
        }

        button,
        ul li a i.fa {
            background: rgba(0, 0, 0, 0.1);
            display: inline-block;
            color: #000;
            text-align: center;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            line-height: 50px;
        }

        ul li a i.fa {
            height: 37px;
            width: 37px;
            line-height: 37px;
        }

        ul li {
            display: inline-block;
            position: absolute;
            top: 0;
            opacity: 0;
            transform: translate(0 0);
            left: 0;
            transition: .5s
        }

        input {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            height: 100%;
            z-index: 2;
            opacity: 0;
            border-radius: 50%;
        }

        input:checked~ul li:nth-child(1) {
            transform: translate(-23px, -67.2px);
        }

        input:checked~ul li:nth-child(2) {
            transform: translate(-72px, -46px);
        }

        input:checked~ul li:nth-child(3) {
            transform: translate(-85px, -50%);
            top: 50%;
        }

        input:checked~ul li:nth-child(4) {
            transform: translate(-73px, 57px);
        }

        input:checked~ul li {
            opacity: 1
        }

        input:checked~ul li:nth-child(5) {
            transform: translate(-23px, 80px);
        }

        button:after,
        button:before {
            position: absolute;
            left: 0;
            top: 0;
            content: '';
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 100%;
            z-index: -1;
            animation: falsh 1.5s infinite linear;
        }

        @keyframes falsh {
            from {
                opacity: 1;
                transform: scale(1)
            }
            to {
                opacity: 0;
                transform: scale(2)
            }
        }


Демонстрация
Прикрепления: 3608853.png(59.5 Kb) · 78689789.zip(4.0 Kb)
Страна: (RU)
Форум » Веб-разработка » Структура кода HTML » Пульсирующая кнопка с контактами на CSS (Красивая анимация пульсирующей кнопки на чистом CSS)
  • Страница 1 из 1
  • 1
Поиск: