player css样式

效果(Player)

花了点时间专门把这个效果给弄出来了,希望以后有能用到的地方复用

样式

<style>
    header {
        padding-bottom: 16px;
        text-align: center
    }

    @media only screen and (min-width: 768px) {
        header {
            margin-right: 48px;
            max-width: 360px;
            padding-bottom: 32px;
            text-align: left
        }

        [hidden] {
            display: none
        }

        header p:first-of-type {
            font-size: 16px;
            font-size: 1rem
        }
    }

    h1 {
        font-size: 2em;
        margin: .67em 0
    }

    h1 {
        color: #00b2ff;
        font-size: 64px;
        font-size: 4rem;
        font-weight: 600;
        letter-spacing: -.025em;
        line-height: 1.2;
        margin: 0 0 24px
    }

    header h1 span {
        animation: shrink-hide 1s cubic-bezier(.175, .885, .32, 1.275) 2s forwards;
        display: inline-block;
        font-weight: 300;
        opacity: .5
    }

    @keyframes shrink-hide {
        0% {
            opacity: .5;
            width: 38px
        }
        20% {
            width: 45px
        }
        to {
            opacity: 0;
            width: 0
        }
    }
</style>

<header>
    <h1>Pl<span>a</span>y<span>e</span>r</h1>
</header>