CSS3完成文本波浪纹线实际效果示例编码

2021-01-20 05:21 jianzhan

序言

css的设计方案之恰当,完成之精巧,细细寻味,其妙不凡,流连忘返。这波浪纹线,取巧的应用了linear-gradient特性,合角度、色调、部位于1体,相互配合background-size,background-repeat,化1为多,光滑过渡。哇,这最终的实际效果太巧秒了!尘人世间沒有词来描述了……     

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

完成方式

英语的语法: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)
不知道道大伙儿看到这里,有木有如看到1番明镜,顿悟了。


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

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

把这两个线融合。


融合

看到这里,你了解如何做到波浪纹线实际效果了么?^_^


高宽比为原先的1/2

最后编码:


文本波浪纹线实际效果

总结

好了,这样就完成了,以上便是这篇文章内容的所有內容了,期待对大伙儿学习培训或应用CSS3能有一定的协助,假如有疑惑大伙儿能够留言沟通交流。