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+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 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
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
offsetParent 算法分析
2010/04/05 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
python实现微信远程控制电脑
2018/02/22 Python
Python selenium的基本使用方法分析
2019/12/21 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
微型企业创业投资计划书
2014/01/10 职场文书
八一建军节活动方案
2014/02/10 职场文书
研发工程师岗位职责
2014/04/28 职场文书
通信工程专业求职信
2014/06/04 职场文书
房屋出售授权委托书
2014/10/12 职场文书
企业员工辞职信范文
2015/05/12 职场文书
Python Django获取URL中的数据详解
2021/11/01 Python
css3新特性的应用示例分析
2022/03/16 HTML / CSS