原标题:CSS3实现文字波浪线效果示例代码
最近在做项目的时候,发现要实现波浪线效果。本文详细的介绍了利用CSS3实现文字波浪线效果的方法。感兴趣的伙伴们可以一起研究:
实现方法
语法:linear-gradient(direction, color-stop 1, color-stop 2,……)
简单用法:background-image: linear-gradient(red, transparent);
增加角度,linear-gradient(45deg, red, transparent)
加个position:linear-gradient(45deg, red, transparent 45%)
加个colorlinear-gradient(45deg, red, transparent 45%,red)不知道大家看到这里,有没有如看到一番明镜,顿悟了。
linear-gradient(45deg, transparent 45%, red 55%, transparent 60%)
linear-gradient(135deg, transparent 45%, red 55%, transparent 60%)
把这两个线结合。
结合
看到这里,你知道怎么达到波浪线效果了么?
高度为原来的1/2
最终代码:
责任编辑: