Question

它们如何使悬停时的背景颜色看起来像这样，而不是在“关于”和“案例研究”区域上看起来像一个方框？ http://clorova.com/

Answer 1

他们使用了一张图片：

http://clorova.com/assets/img/general/hover.png

如果仅检查页面，则会看到CSS：

.flare-hover:before {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    background-image: url(../img/general/hover.png);
    background-size: cover;
    top: -200px;
    left: -100px;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    transform: scale(0.4);
}

Answer 2

他们在:: before上使用图片

  .flare-hover:before {
        content: '';
        position: absolute;
        width: 450px;
        height: 450px;
        background-image: url(../img/general/hover.png);
        background-size: cover;
        top: -200px;
        left: -100px;
        opacity: 0;
        pointer-events: none;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        transition: all 0.2s ease;
        -webkit-transform: scale(0.4);
        -moz-transform: scale(0.4);
        -ms-transform: scale(0.4);
        -o-transform: scale(0.4);
        transform: scale(0.4);
    }

背景色悬停

2 个答案: