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实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
CSS基础详解
Oct 16 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
php中截取字符串支持utf-8
2007/01/18 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
python多进程间通信代码实例
2019/09/30 Python
python操作yaml说明
2020/04/08 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
用Python 执行cmd命令
2020/12/18 Python
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
如何开发安全的AJAX应用
2014/03/26 面试题
小学教师师德演讲稿
2014/05/06 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
满月酒邀请函
2015/01/30 职场文书
邀请函的格式
2015/01/30 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js