【网页】自制流光卡片

news2025/3/18 7:33:16

概述

小红书有个博主自己搞的笔记排版工具叫“流光卡片”，类似的还有个Markdown排版工具叫MD2Card。

我这个版本类似，但是自己写的东西，控制性更好。

初期就写了个静态页面，后期结合Godot快速生成，并可能结合JS库（例如html2canvas）实现生成页面转图片以及批量下载。

初期代码

因为这篇写于CSS原子化那篇之前，所以样式还是不太够简洁和复用。后续采用原子化设计。这里只做记录。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
*{padding:0px;margin: 0px;}
body{padding-top: 20px;}
h1,h2{margin: 10px 0px;}
p{
    line-height: 1.8em;
    text-indent: 2em;
    font-size: 14px;
}
img{
    max-width: 100%;margin: 5px 0px;
    border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.out_box{
    color: #a3a3a3;
    height: 500px;
    aspect-ratio: 3/4;
    /* background:linear-gradient(to right, rgba(0, 179, 255, 0.434), rgba(0, 81, 255, 0.603)); */
    background:url(bg.png);
    margin: 0px auto;
    padding: 20px;
}
.inner_box{
    aspect-ratio: 3/4;
    border-radius: 10px;
    border: 1px solid rgb(22, 67, 67,0.1);
    padding: 10px;
}
span.date{
    font-size: 12px;
    border-bottom: 1px solid #6c8bcc;
    color: #6c8bcc;
}
.glass{
    background-color:rgba(255, 255, 255, 0.05);
    backdrop-filter:blur(10px);
}

.shadow{
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="out_box">
    <div class="inner_box glass shadow">
        <h1>自制流光卡片</h1>
        <span class="date">2025-2-24</span>
        <h2>概述</h2>
        <p>基于网页实现的4:3页面效果。用于截图后发小红书。模仿小红书“流光卡片”作者。</p>
        <img src="1.png" alt="" srcset="">
        <p>后续由MarkDown直接生成</p>
    </div>
</div>
</body>
</html>