palmerye / purecss Goto Github PK

<h1>CaptureColor</h1>

h1 {
    font-size: 15rem;
    line-height: 21rem;
    font-weight: bold;
    text-shadow: 0 -1px 0 rgba(165, 153, 153, 0), 0 1px 10px rgba(0, 0, 0, .6), 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .2), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 7px 10px rgba(0, 0, 0, .25), 0 15px 10px rgba(0, 0, 0, .2), 0 25px 15px rgba(0, 0, 0, .15);
    position: relative;
    overflow: hidden;
    background-image: -webkit-linear-gradient(135deg, #000, #000 5%, #000 48.5%, rgb(39, 38, 38) 49%, #fff 50%, rgb(39, 38, 38) 51%, #000 51.5%, #000 98%, #000);
    -webkit-text-fill-color: transparent;  // 文字填充色为透明
    -webkit-text-stroke: .2px rgba(247, 240, 240, 0.164);
    -webkit-background-clip: text; // 背景被裁剪为文字的前景色(只有chrome支持)
    -webkit-background-size: 400% 100%; // 放大背景区域，使光线进入并消失
    -webkit-animation: masked-animation 3s infinite ease-out forwards;
    @-webkit-keyframes masked-animation {
        0%  { background-position: 0 0;}
        100% { background-position: -100% 0;}
    }
}

<span>Let's Go!</span>

span {
    display: inline-block;
    margin: 0 3rem;
    padding: 0 1rem;
    width: 15rem;
    height: 5rem;
    font-size: 3rem;
    line-height: 5rem;
    text-align: center;
    color: #fff;
    font-weight: bold;
    position: relative;
    transition: all .3s;

    &::after {
        content: '→';
        position: absolute;
        right: -1rem;
        transition: all .1s;
    }

    &::before {
        content: ' ';
        display: inline-block;
        width: 2rem;
        height: 0.2rem;
        position: absolute;
        top: 2.35rem;
        right: -1rem;
        background: #fff;
        z-index: -1;
        opacity: 0;
        transition: all .2s ease-in;
    }

    &:hover {
        cursor: pointer;
        margin: 0;
        color: #000;

        &::before {
            transform: translateX(-2rem) scale(7.5, 25);
            transform-origin: 100% 40%;
            opacity: 1;
        }

        &::after {
            opacity: 0;
        }
    }
}