player css样式

最新推荐文章于 2023-08-05 10:29:34 发布

CDamogu

最新推荐文章于 2023-08-05 10:29:34 发布

阅读量373

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_33704787/article/details/125174779

版权

这篇博客展示了如何花费时间精心制作一个Player效果，包括在不同屏幕尺寸下的样式调整和文字动画细节。主要关注HTML和CSS的使用，通过媒体查询适应不同设备，以及使用关键帧动画实现文字淡入消失的效果。

摘要由CSDN通过智能技术生成

效果(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>