Question

使用滚动效果更改背景颜色是否有简单的方法和更少的代码？感谢

<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再次有趣。

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

1 个答案: