html字体特效大全

CSS基础字体样式

CSS为网页文字提供了丰富的样式控制,以下是常用属性及效果：

文字特效实现

文字阴影

.shadow {
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5); / 水平偏移 垂直偏移 模糊半径 颜色 /
}

文字渐变

.gradient {
    background: linear-gradient(to right, red, yellow);
    -webkit-background-clip: text; / 关键属性 /
    color: transparent;
}

霓虹发光效果

.neon {
    font-size: 48px;
    color: #fff;
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #ff00de,
        0 0 30px #ff00de;
}

文字燃烧效果

.fire {
    font-size: 60px;
    color: orange;
    text-shadow: 
        0 -1px 4px #FFF,
        0 -2px 8px #FFA,
        0 -4px 12px #FF6,
        0 -8px 16px #FF2;
}

打字机动画

.typewriter {
    overflow: hidden; / 隐藏超出部分 /
    border-right: .15em solid orange; / 光标效果 /
    white-space: nowrap; / 保持单行 /
    animation: typing 3s steps(30), blink .5s infinite; / 组合动画 /
}
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}
@keyframes blink {
    50% { border-color: transparent; } / 闪烁效果 /
}

HTML实体与符号