Question

@mixin yellow-button($from, $to) {
    font-size: 16px;
    color: white;
    font-weight: bold;

    /*Button initial state */

    background-color: $from;
    background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
    background-image: -webkit-linear-gradient(top, $from, $to);
    background-image:    -moz-linear-gradient(top, $from, $to);
    background-image:      -o-linear-gradient(top, $from, $to);
    background-image:         linear-gradient(to bottom, $from, $to);

    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;

    border : 1px solid $light-grey;
    padding: 0.02em 1em 0.15em 1em;

    /* Transition here */

    -webkit-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;

    /* hover state, using SaSS */

    &:hover {
        background-color: $from;
        background-image: -webkit-gradient(linear, left top, left bottom, from($from), to(darken($to, 10%)));
        background-image: -webkit-linear-gradient(top, $from, darken($to, 10%));
        background-image:    -moz-linear-gradient(top, $from, darken($to, 10%));
        background-image:      -o-linear-gradient(top, $from, darken($to, 10%));
        background-image:         linear-gradient(to bottom, $from, darken($to, 10%));
    }
}

Answer 1

因为过渡不支持渐变。也许你可以尝试这个http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

CSS过渡，为什么这不起作用？

1 个答案: