Css3实现波浪线效果1

一、波浪线，常用

.info::before {content: '';position: absolute;top: 30px;width: 100%;height: 0.25em;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;
}

显示效果：

二、波浪线变形 xxx

修改div的高度和背景高度

.info::before {content: '';position: absolute;top: 30px;width: 100%;height: 0.5em;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;
}

显示效果：

三、波浪线加粗

修改div 的高度和背景高度

.info::before {content: '';position: absolute;top: 30px;width: 100%;height: 0.5em;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: 1em 1em;background-repeat: repeat-x, repeat-x;
}

显示效果：

HTML5 background-color和background-image问题共用问题

CSS网页布局垂直居中整理

CSS3 Flex布局整理(三)-项目属性

Css3实现波浪线效果1相关推荐

html怎么在字体中加波浪线,CSS3实现文字波浪线效果
前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了linear-gradient属性,合角度.颜色.位置于一体,配合background-size,backgr ...
html怎么下划波浪线,CSS3如何实现文字波浪线效果
CSS3如何实现文字波浪线效果发布时间:2021-06-29 11:40:23 来源:亿速云阅读:92 作者:小新这篇文章主要介绍CSS3如何实现文字波浪线效果,文中介绍的非常详细,具有一定的参 ...
php加波浪线不解析,给文字加波浪线效果
这次给大家带来给文字加波浪线效果,给文字加波浪线效果的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了lin ...
android 图片底部波浪线,Android实现波浪线效果（xml bitmap）
我们要实现的效果如下: 在这之前先带大家了解一下xml bitmap,何为xml bitmap? xml bitmap是一个用xml定义的文件放在资源目录,定义的对象是图片,为bitmap定义别名,这 ...
html给文字添加波浪线,使用CSS3线性渐变（linear-gradient）实现文本波浪线效果_html/css_WEB-ITnose...
我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受. 而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整. 比如你只是想调 ...
波浪形状html,使用CSS3线性渐变（linear-gradient）实现文本波浪线效果_html/css_WEB-ITnose...
我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受. 而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整. 比如你只是想调 ...
CSS：文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现就是使用径 ...
HTML怎么在字体下方加波浪线,CSS实现文字下面波浪线动画效果
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8607 本文可全文转载,个人网站无需授权,但需要保留原作者.出处以及文中链接,任 ...
html怎么在字体中加波浪线,强大的CSS：文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现就是使用径 ...

Css3实现波浪线效果1

Css3实现波浪线效果1相关推荐

最新文章

热门文章