php加波浪线不解析,给文字加波浪线效果

这次给大家带来给文字加波浪线效果,给文字加波浪线效果的注意事项有哪些,下面就是实战案例,一起来看一下。

前言

css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言。这波浪线,取巧的运用了linear-gradient属性,合角度、颜色、位置于一体,配合background-size,background-repeat,化一为多,平滑过渡。哇,这最后的效果太巧秒了!尘世间没有词来形容了……

——题记,改编自《食神》

实现方法

语法:linear-gradient(direction, color-stop 1, color-stop 2,……)

9e2d6bdd906f3c41791d2fc0067220e4.png

简单用法:background-image: linear-gradient(red, transparent);

3e840d51d320940c5c32e05abc0fe2a4.png

增加角度,linear-gradient(45deg, red, transparent)

9710872240c0bc52e7ea03167ca6cef1.png

加个position:linear-gradient(45deg, red, transparent 45%)

7bd38bf5d23909680c83aa5d1ba73e65.png

加个colorlinear-gradient(45deg, red, transparent 45%,red)

不知道大家看到这里,有没有如看到一番明镜,顿悟了。

3dd9ca6de24fbfe7294c309f031760df.png

linear-gradient(45deg, transparent 45%, red 55%, transparent 60%)

0d21303fec38bb64fa75344822bca671.png

linear-gradient(135deg, transparent 45%, red 55%, transparent 60%)

把这两个线结合。

1fb3112791bd14709a91824ff7cb8936.png

结合

看到这里,你知道怎么达到波浪线效果了么?^_^

e254a31d26af54728bc3555cac0eebe9.png

高度为原来的1/2

最终代码:

febc8930aa20611998c242d3c172b517.png

文字波浪线效果

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值