HTML+CSS 流光卡片
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
HTML:
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>流光卡片</title> <link rel="stylesheet" href="./53-流光卡片.css"> </head>
<body> <div class="box"> <span></span> <h2>01</h2> </div> </body>
</html> |
CSS:
|
* { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0c1022; }
.box { position: relative; width: 300px; height: 400px; background: rgba(0, 0, 0, .75); border-radius: 20px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.box::after { content: ""; position: absolute; width: 500px; height: 500px; background-image: conic-gradient(transparent, transparent, transparent, #de44d4); animation: animate 4s linear infinite; animation-delay: -2s; }
.box::before { content: ""; position: absolute; width: 500px; height: 500px; background-image: conic-gradient(transparent, transparent, transparent, #00ccff); animation: animate 4s linear infinite; }
@keyframes animate { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } }
.box span { position: absolute; inset: 5px; border-radius: 16px; background: #0c1022; z-index: 1; }
.box h2 { position: relative; z-index: 2; color: #fff; font-size: 10em; } |
