CSS3 很棒的波浪形下划线效果（未使用图片）

Wavy Underlines (No Images). 基本思路是使用伪元素的斜向线性渐变，分别构造一个45度/135度的直线，隐藏掉一半并相连（repeat）形成波浪状折线。 linear-gradient语法为： -linear-gradient( [ || ,]? , [, ]* )

css3, underline

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 14571
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html,
body {
    height: 100%;
}
body {
    font-family: Open Sans, sans-serif;
    font-size: 200%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.error {
    position: relative;
}
.error::before {
    content: '';
    position: absolute;
    bottom: -0.125em;
    width: 100%;
    height: 0.25em;
    background: -webkit-linear-gradient(315deg, transparent, transparent 45%, #dc3912, transparent 55%, transparent 100%), -webkit-linear-gradient(45deg, transparent, transparent 45%, #dc3912, transparent 55%, transparent 100%);
    background: linear-gradient(135deg, transparent, transparent 45%, #dc3912, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, #dc3912, transparent 55%, transparent 100%);
    background-size: 0.5em 0.5em;
    background-repeat: repeat-x, repeat-x;
}
.warning {
    position: relative;
}
.warning::before {
    content: '';
    position: absolute;
    bottom: -0.125em;
    width: 100%;
    height: 0.25em;
    background: -webkit-linear-gradient(315deg, transparent, transparent 45%, #f90, transparent 55%, transparent 100%), -webkit-linear-gradient(45deg, transparent, transparent 45%, #f90, transparent 55%, transparent 100%);
    background: linear-gradient(135deg, transparent, transparent 45%, #f90, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, #f90, transparent 55%, transparent 100%);
    background-size: 0.5em 0.5em;
    background-repeat: repeat-x, repeat-x;
}
.info {
    position: relative;
}
.info::before {
    content: '';
    position: absolute;
    bottom: -0.125em;
    width: 100%;
    height: 0.25em;
    background: -webkit-linear-gradient(315deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%), -webkit-linear-gradient(45deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%);
    background: linear-gradient(135deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%);
    background-size: 0.5em 0.5em;
    background-repeat: repeat-x, repeat-x;
}

HTML

Wavy Underlines (No Images). 基本思路是使用伪元素的斜向线性渐变，分别构造一个45度/135度的直线，隐藏掉一半并相连（repeat）形成波浪状折线。 linear-gradient语法为： -linear-gradient( [ || ,]? , [, ]* )

css3, underline

编辑器支持Emmet

快捷键

Wavy Underlines (No Images). 基本思路是使用伪元素的斜向线性渐变，分别构造一个45度/135度的直线，隐藏掉一半并相连（repeat）形成波浪状折线。 linear-gradient语法为： -linear-gradient( [ || ,]? , [, ]* )

css3, underline

CSS3 2个实用的鼠标悬停文本下划线动画效果

使用CSS3线性渐变和合成模式（blend-mode）实现的5种图像特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：