首页 建站教程 WEB前端 正文

CSS3 波浪形下划线

纯CSS很棒的波浪形下划线Html代码:<div> An <span class="error">error</span>, a <span class="warning">warning</span> and an <span class=&...

css很棒的波浪形下划线

html代码:

<div>
    An <span class="error">error</span>, a <span class="warning">warning</span> and an <span class="info">info</span> baked by techbrood.
</div>


CSS样式

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;
}

CSS3 波浪形下划线 css 特效 css3  图1

效果


查看演示效果

打赏
海报

本文由优美主题原创或收集发布

转载请注明本文地址:http://www.umtheme.com/web/49.html

相关推荐

如何在html页面中通过css隐藏元素

在平常的页面布局中,我们经常会遇到将某个模块隐藏,而实现不同的页面布局或js交互效果,尤其是在响应式布局中比较常见,下面我们整理了一些关于实现隐藏页面元素的多种方法以及各种方法不同的特点(如:是否占据...

WEB前端 2020.09.18 0 18

web前端写html页面div+css命名规范

web前端写html页面div+css命名规范

使用良好的CSS书写规范来写CSS代码,既能最大化优化前端代码,提升代码阅读体验,更重要的是为以后维护带来方便。常用的CSS命名一般由小...

WEB前端 2020.09.08 0 65

给网页增加WOW插件滚动触发css动效

随着浏览器的兼容性增强,css3动画特效运用也越来越广,通过css3动画库加js可以实现很多炫酷的效果。比如在滚动页面时会触发展示各式各样的动画效果,通过设置调整可以改变动画的风格、延迟、偏移量等。优...

WEB前端 2018.07.04 0 3664

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi

感谢您的支持