文字的3D效果

酸奶很甜發表於2020-10-31
3D

HTML

<div class="g-box">
    <h1>CSS的世界很美</h1>
</div>

CSS

.g-box {
    width: 100%;
    height: 100%;
    background-color: #40E495;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.g-box h1 {
    font-size: 100px;
    color: white;
    font-family: "華文楷體";
    transition: 1s;
}

.g-box h1:hover {
    text-shadow: 0 1px 0 #ccc,
        0 2px 0 #ccc,
        0 3px 0 #ccc,
        0 4px 0 #ccc,
        0 5px 0 #ccc,
        0 6px 0 #ccc,
        0 7px 0 #ccc,
        0 8px 0 #ccc,
        0 9px 0 #ccc,
        0 10px 0 #ccc,
        0 11px 0 #ccc,
        0 12px 0 #ccc,
        0 20px 30px rgba(0, 0, 0, 0.5);
}

相關文章