使用text-decoration实现波浪效果
text-decoration
一个非常有意思的 CSS 属性。
text-decoration
这个 CSS 属性是用于设置文本的修饰线外观的(下划线、上划线、贯穿线/删除线 或 闪烁)。
并且在 CSS Text Decoration Module Level 3 新增了波浪线。
关键点
使用 text-decoration-style: wavy 生成波浪下划线。
缺点
缺点在于由于是文本,使用 text-decoration-style: wavy 生成的波浪线受字体的影响很大,极有可能在一部分设备调试正常,在另一部设备由于字体的变化导致譬如动画首尾衔接出现问题。
HTML:
<div >ABCDEFGHIJKLMNOPQ</div>
<div class="wave">ABCDEFGHIJKLMNOPQ</div>
SCSS:
div {
width : 200px;
height: 200px;
line-height: 200px;
font-size: 50px;
margin: auto;
text-align: center;
overflow: hidden;
}
.wave {
border: 5px solid deeppink;
border-radius: 50%;
animation: indent 5s infinite linear;
}
div {
color: transparent;
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: deeppink;
}
@keyframes indent {
100% {
text-indent: -110px;
}
}
效果如下:
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 Nuri Alfred - Deertech
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果