仿QQ音乐推荐小卡片

<div class="card">
        <i></i>
        <div class="float">

        </div>
        <img src="http://p2.music.126.net/EuqsADTk5JdsUAB8I5NQMw==/109951168472373965.jpg?param=177y177" alt="">
</div>

 

:root {
        --card-content1: 'Daily\a 30';
        --card-bg: #386bf7;
    }

    html,
    body {
        margin: 0;
        padding: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card {
        width: 150px;
        height: 150px;
        min-width: 150px;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all .2s linear;
        margin: 20px;
    }

    .card:hover {
        transform: translateY(-10px);
    }

    .card:hover::before {
        height: 100% !important;
    }

    .card:hover i {
        display: block;
    }

    .card::before {
        content: '';
        width: 100%;
        height: 0;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        z-index: 2;
        transition: all linear;
        bottom: 0;
    }

    .card img {
        width: 100%;
        height: 100%;
    }

    .card i {
        width: 40px;
        height: 40px;
        font-style: normal;
        position: absolute;
        z-index: 3;
        background: url('data:image/png;base64,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');
        background-size: 40px;
        display: none;
    }

    .card i:hover {
        background: url('data:image/png;base64,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');
        background-size: 40px;
    }

    .card .float {
        width: 100px;
        height: 100px;
        background-color: var(--card-bg);
        border-radius: 50%;
        position: absolute;
        top: -30%;
        left: -30%;
    }

    .card .float::before {
        content: var(--card-content1);
        position: absolute;
        top: 60%;
        left: 55%;
        color: white;
        font-weight: 700;
        font-size: 2rem;
        white-space: pre;
        line-height: 25px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值