Jump to content

Эффект плавного затухания логотипа

Sipsb

By Sipsb

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

1.gif

Добавьте данный код в Custom.css 

a#elLogo:hover {
    opacity: .4;
    -moz-transition-property: opacity;
    -moz-transition-duration: 1s;
    -moz-transition-delay: 0s;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: 0s;
    -o-transition-property: opacity;
    -o-transition-duration: 1s;
    -o-transition-delay: 0s;
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: 0s;
}
a#elLogo {
    display: inline;
    opacity: 1;
    -moz-transition-property: opacity;
    -moz-transition-duration: 1s;
    -moz-transition-delay: 0s;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: 0s;
    -o-transition-property: opacity;
    -o-transition-duration: 1s;
    -o-transition-delay: 0s;
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: 0s;
}

 

    • Go to записи

    User Feedback

    Recommended Comments

    War75 Contributor

    War75

    Пользователи
    В 05.09.2017 в 19:17, Hundmann сказал:

    А можно ли сделать функцию свечения при наведении? 

    a#elLogo:hover {
    opacity: 1;
    -moz-transition-property: opacity;
    -moz-transition-duration: 1s;
    -moz-transition-delay: 0s;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: 0s;
    -o-transition-property: opacity;
    -o-transition-duration: 1s;
    -o-transition-delay: 0s;
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: 0s;
}
a#elLogo {
    display: inline;
    opacity: .4;
    -moz-transition-property: opacity;
    -moz-transition-duration: 1s;
    -moz-transition-delay: 0s;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: 0s;
    -o-transition-property: opacity;
    -o-transition-duration: 1s;
    -o-transition-delay: 0s;
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: 0s;
}

     

  • Цитата
    • Hundmann Community Regular

    Hundmann

    Пользователи
    3 часа назад, War75 сказал: 
    
a#elLogo:hover {
    opacity: 1;
    -moz-transition-property: opacity;
    -moz-transition-duration: 1s;
    -moz-transition-delay: 0s;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: 0s;
    -o-transition-property: opacity;
    -o-transition-duration: 1s;
    -o-transition-delay: 0s;
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: 0s;
}
a#elLogo {
    display: inline;
    opacity: .4;
    -moz-transition-property: opacity;
    -moz-transition-duration: 1s;
    -moz-transition-delay: 0s;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: 0s;
    -o-transition-property: opacity;
    -o-transition-duration: 1s;
    -o-transition-delay: 0s;
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: 0s;
}

     

    Это немного не то. Тут просто инверсия функции, а я имел ввиду эффект свечения.

  • Цитата
    • Axeland Collaborator

    Axeland

    Пользователи
    В 21.09.2017 в 14:21, Hundmann сказал:

    Это немного не то. Тут просто инверсия функции, а я имел ввиду эффект свечения.

    Если логотип текстом, то добавить text-shadow: #000 1px 1px 1px вместо opacity (настроить цвет и размер свечения самим), если логотип картинкой - то сложно, т.к. для подобных элементов есть только box-shadow, который добавляет свечение контейнеру, а не картинке внутри. Можно png-шками сделать (но это тип прошлый век) - две картинки логотипа, одна с нужным вам эффектом, сделанным в фотошопе, при наведении менять background с одной картинки на другую с transition. 

  • Цитата

    • Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Добавить комментарий...