【css】card边框滚动

咸蛋超人l

已于 2023-06-19 17:28:42 修改

阅读量423

点赞数 1

文章标签： css css3 前端

于 2023-06-19 10:41:46 首次发布

本文链接：https://blog.csdn.net/weixin_50636536/article/details/131282681

版权

在这里插入图片描述

<div class="card">
    <h2>CARD</h2>
</div>

<style>
    .card {
        width: 190px;
        height: 254px;
        background: #07182E;
        position: relative;
        display: flex;
        place-content: center;
        place-items: center;
        overflow: hidden;
        border-radius: 20px;
    }

    .card h2 {
        z-index: 1;
        color: white;
        font-size: 2em;
    }

    .card::before {
        content: '';
        position: absolute;
        width: 100px;
        background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
        height: 130%;
        animation: rotBGimg 3s linear infinite;
        transition: all 0.2s linear;
    }

    @keyframes rotBGimg {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .card::after {
        content: '';
        position: absolute;
        background: #07182E;
    ;
        inset: 5px;
        border-radius: 15px;
    }
    .card:hover:before {
      background-image: linear-gradient(180deg, rgb(81, 255, 0), purple);
      animation: rotBGimg 3.5s linear infinite;
    }
</style>