CSS 一个炫酷又简单的盒子

孤寂の末年

已于 2022-11-11 18:10:51 修改

阅读量537

点赞数 6

文章标签： css css3 html

于 2022-11-10 21:58:21 首次发布

本文链接：https://blog.csdn.net/qq_30766411/article/details/127797188

版权

这是一篇介绍2022年11月10日晚上QQ录屏的创新设计和技术展示，文章详细探讨了HTML、CSS、JavaScript等前端技术的巧妙运用，以及动态效果背后的动画原理。作者通过实例展示了如何将视觉艺术与技术结合，创造出独特的交互体验。

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

QQ录屏20221110215648

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="box">
        <span></span>
        <h2>1</h2>
    </div>
</body>
</html>

index.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100Vh;
    width: 100vw;
    background-color: rgb(90, 90, 90);
}

.box{
    position: relative;
    width: 200px;
    height: 300px;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    border-radius: 35px;
    overflow: hidden;
}

.box::after{
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: conic-gradient(transparent,transparent,transparent,pink);
    animation:identifier 3s linear infinite;
}
.box::before{
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    /* conic-gradient圆锥渐变,从12点钟方向开始顺时针360°渐变,可以填多个颜色填充 transparent透明色*/
    background: conic-gradient(transparent,transparent,transparent,rgb(58, 172, 248));
    animation:identifier 3s -1.5s linear infinite;
}

span{
    z-index: 1;
    position: absolute;
    width: 192px;
    height: 292px;
    background-color: rgb(90, 90, 90);
    border-radius: 32px;
}
h2{
    z-index: 2;
    position: absolute;
    color: aliceblue;
    font-size: 80px;
}

@keyframes identifier {
    0%{
            transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}