css实现印章效果

<div class="seal">
    <div class="seal-status">已使用</div>
    <div>2023.06.09</div>
    <div>18:59</div>
</div>
<div class="seal-red">
    Draft
</div>

.seal{
    width: 100px;
    height: 100px;
    transform: rotate(-45deg);
    color: #B4B4B4;
    display: grid;
    place-content: center;
    text-align: center;
    font-size: 12px;
    border: 2px solid #B4B4B4;
    outline: 6px solid #B4B4B4;
    outline-offset: 5px;
    border-radius: 50%;
}
.seal-status{
    font-weight:900;
    font-size:20px;
}
.seal-red {
    --red: #d00;
    display: inline-block;
    border: solid .1em var(--red);
    border-radius: .2em;
    color: var(--red);
    content: 'Draft';
    font-size: 50px;
    font-weight: bold;
    line-height: 1;
    opacity: 0;
    padding: .1em .5em;
    text-transform: uppercase;
    opacity: 0;
    transform: rotate(-2deg) scale(5);
    animation: seal .3s cubic-bezier(0.6, 0.04, 0.98, 0.335) forwards;
}
@keyframes seal {
    100% {
        opacity: .75;
        transform: rotate(-15deg) scale(1);
    }
}

 

 

出处：https://wow.techbrood.com/fiddle/35662