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

你可以让你的缩减大小通过压缩到精缩版，或者你应该使用CSS预处理器一样SASS（我推荐）。

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