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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 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
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
python 不以科学计数法输出的方法
2018/07/16 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
python二元表达式用法
2019/12/04 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
Python中的流程控制详解
2021/02/18 Python
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
怎样客观的做好自我评价
2013/12/28 职场文书
行政副总岗位职责
2014/02/23 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
运动会800米赞词
2015/07/22 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
优质服务标语口号
2015/12/26 职场文书
导游词之张家口
2019/12/13 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android