Простая анимация кругового масштабирования CSS

CSS

Недавно я работал над страницей входа в компанию. Студенты UE надеются, что сторонний значок входа будет иметь эффект кругового масштабирования при наведении курсора (исходное слово - эффект пульсации -_-||).Об эффекте см. на кнопки «Поделиться» Tencent News и Netease News.

Я посмотрел исходный код этих двух страниц, в основном использовалtransform:scale()а такжеtransition, а окончательный эффект реализации выглядит следующим образом:

自己的实现效果
Идея реализации в целом имитируется NetEase News, и схема выглядит следующим образом:

<a href="" class="third-party third-party-weixin">
     <i></i>
     <span></span>
 </a>

Внешний тег a используется для общего контейнера и перехода, а внутренний тег i использует псевдоэлементы ::before и ::after в качестве цвета фона и цвета переднего плана соответственно Эти два псевдоэлемента абсолютно позиционированы и центрированы по вертикали. и по горизонтали. :after устанавливает свойство масштабированияtransform:scale(0), свойства анимации переходаtransition: all .3s, при нормальных обстоятельствах ::before виден при наведении курсора ::after устанавливает свойство масштабированияtransform:scale(1), когда два соседних абсолютно позиционированных элемента не задают z-index, элемент за потоком документа находится сверху, и есть атрибут анимации переходаtransitionЭффект анимации масштабирования реализован в случае .

Тег span используется для отображения логотипа, который может быть изображением или веб-шрифтом, если он прозрачен, и здесь используется изображение. CSS (здесь используется sass) выглядит следующим образом:

.third-party {
    position: relative;
    // 为了兼容firefox必须要变成block或inline-block
    display: inline-block;
    width: 48px;
    height: 48px;
    margin: {
        left: 6%;
        right: 6%;
    }
    &:hover {
        i {
            &::after {
                transform: scale(1);
            }
        }
    }
    span {
        // position: relative是为了兼容firefox和IE
        position: relative;
        display: block;
        width: 48px;
        height: 48px;
        background-size: 30px;
        background-position: center;
        background-repeat: no-repeat;
    }
    i {
        position: absolute;
        top: 0;
        left: 0;
        width: 48px;
        height: 48px;
        &::before {
            content: '';
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        &::after {
            content: '';
            transition: all .3s;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transform: scale(0);
        }
    }
    &.third-party-weixin {
        span {
            background-image: url(../images/login/weixin-64.png);
        }
        i {
            &::before {
                background-color: #20a839;
            }
            &::after {
                background-color: #30cc54;
            }
        }
    }
}

Это завершает эту простую анимацию кругового масштабирования.

PS: ScreenToGifЗапись GIF действительно проста в использовании, я рекомендую ее.

Категории