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


    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;
    }

     



    User Feedback

    Recommended Comments

    В 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;
    }

     

    Share this comment


    Link to comment
    Share on other sites
    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;
    }

     

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

    Share this comment


    Link to comment
    Share on other sites
    В 21.09.2017 в 14:21, Hundmann сказал:

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

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

    Share this comment


    Link to comment
    Share on other sites


    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

×