css动画边框 - 最帅爸爸

效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        background: rgb(0,0,0,0.8);
    }
    #div1{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        width: 300px;
        height: 400px;
        overflow: hidden;
        /*使伪类元素flex布局*/
        display: flex;
        /*左右居中*/
        justify-content: center;
        /*所有的子元素居中*/
        align-items: center;
        background: #000000;
        border-radius: 12px;
    }
    #div1::after{
        content: "";
        width: 500px;
        height: 500px;
        position: absolute;
        background-image: conic-gradient(transparent,transparent,transparent,#7557D1);
        animation:animate 4s infinite linear;
    }
    #div1::before {
        content: "";
        width: 500px;
        height: 500px;
        position: absolute;
        transform: rotate(180deg);
        background-image: conic-gradient(transparent, transparent, transparent, #EA4878);
        animation:animate 4s infinite linear;
        animation-delay: -2s;
    }
    #div1 span{
        position: relative;
        margin: 0 auto;
        background: #333333;
        z-index: 12;
        width: 290px;
        height: 390px;
        border-radius: 12px;
    }
    #div1 h2{
        color: #fff;
        line-height: 400px;
        text-align: center;
        font-size: 5em;
    }
    @keyframes animate {
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
</style>
<body>
    <div id="div1">
        <span>
        <h2>1</h2>
        </span>
    </div>
</body>
</html>
posted on 2022-10-08 19:45 最帅爸爸阅读(118) 评论(0) 收藏举报