CSS3悬停按钮滚动背景颜色变化

Question

有没有简单的方法和更少的代码来改变带有滚动效果的背景颜色？谢谢

http://jsfiddle.net/Das8r/

<a href="#"><span data-title="Text Link">Text Link</span></a>

    a{
        color: #03c;
        display: inline-block;
        overflow: hidden;
        vertical-align: top;

    }

    a span{
        display: block;
        position: relative;
        padding: 0 2px;
        -webkit-transition: all 400ms ease;
        -moz-transition: all 400ms ease;
        -o-transition: all 400ms ease;
        -ms-transition: all 400ms ease;
        transition: all 400ms ease;
        -webkit-transform-origin: 50% 0%;
        -moz-transform-origin: 50% 0%;
        -o-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    a:hover span {
        background: #03c;
        -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
        -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
        -o-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
        -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
        transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    }

    a span:after {
        content: attr(data-title);
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        padding: 0 2px;
        color: #fff;
        background: #03c;
        -webkit-transform-origin: 50% 0%;
        -moz-transform-origin: 50% 0%;
        -o-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
        -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
        -o-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
        -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
        transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    }

Answer 1

您可以通过压缩到缩小版本来缩小您的版本，或者您应该使用像 SASS 这样的 CSS 预处理器。 (我推荐)。

CSS 本身可能很有趣，但样式表变得越来越大、越来越复杂并且更难维护。这是预处理器可以提供帮助的地方。 Sass允许您使用 CSS 中尚不存在的功能，例如变量、嵌套、混入、继承和其他使编写 CSS 再次变得有趣的好东西。