CSS3| 制作文字波浪线效果
2016-11-07 16:27
447 查看
css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言。这波浪线,取巧的运用了linear-gradient属性,合角度、颜色、位置于一体,配合background-size,background-repeat,化一为多,平滑过渡。哇,这最后的效果太巧秒了!尘世间没有词来形容了……
——题记,改编自《食神》
简单用法: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
最终代码:
文字波浪线效果
同学,你,看懂了吗?_?
如有他言,望多多指教~
——题记,改编自《食神》
正文
语法: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
最终代码:
文字波浪线效果
同学,你,看懂了吗?_?
如有他言,望多多指教~
相关文章推荐
- CSS3实现文字波浪线效果示例代码
- CSS3制作文字半透明倒影效果
- 如何利用CSS3制作3D文字效果
- 见过这样的用CSS3制作的3D立体效果文字吗?
- css3之animation制作闪烁文字效果
- css3之animation制作闪烁文字效果 转
- CSS3制作文字半透明倒影效果
- CSS3制作文字半透明倒影效果
- CSS3制作文字半透明倒影效果
- css3动画的原理 及 各种效果制作
- 用css3,transform3d制作房屋全景展示效果(一)
- css3中的文字效果
- 2012年最酷的25个 CSS3 效果和制作教程
- jQuery和CSS制作霓虹灯文字效果
- 推荐10个 CSS3 制作的创意下拉菜单效果
- 用css3制作一个搜索框效果
- 巧用CSS3 border制作图片遮罩效果
- 了解CSS3的文字阴影效果 - Text Shadow effects
- 【转载】CSS3 文字溶解效果
- CSS3下的渐变文字效果实现