CSS3实现文字波浪线效果示例代码


Posted in HTML / CSS onNovember 20, 2016

前言

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

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

实现方法

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

CSS3实现文字波浪线效果示例代码
简单用法:background-image: linear-gradient(red, transparent);

CSS3实现文字波浪线效果示例代码

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

CSS3实现文字波浪线效果示例代码

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

CSS3实现文字波浪线效果示例代码

加个colorlinear-gradient(45deg, red, transparent 45%,red)
不知道大家看到这里,有没有如看到一番明镜,顿悟了。

CSS3实现文字波浪线效果示例代码
linear-gradient(45deg, transparent 45%, red 55%, transparent 60%)

CSS3实现文字波浪线效果示例代码

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

把这两个线结合。

CSS3实现文字波浪线效果示例代码
结合

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

CSS3实现文字波浪线效果示例代码
高度为原来的1/2

最终代码:

CSS3实现文字波浪线效果示例代码
文字波浪线效果

总结

好了,这样就实现了,以上就是这篇文章的全部内容了,希望对大家学习或者使用CSS3能有所帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
玩转CSS3色彩
Jan 16 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 #HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 #HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 #HTML / CSS
CSS3 box-sizing属性详解
Nov 15 #HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 #HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 #HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 #HTML / CSS
You might like
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
mysql5写入和读出乱码解决
2006/11/25 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
Python字符串转换成浮点数函数分享
2015/07/24 Python
python相似模块用例
2016/03/04 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
python编写俄罗斯方块
2020/03/13 Python
Python 多进程原理及实现
2020/12/21 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
经管应届生求职信范文
2014/05/18 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
Python OpenGL基本配置方式
2022/05/20 Python