使用CSS3线性渐变(linear-gradient)实现文本波浪线效果_html/css_WEB-ITnose
我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受。
而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整。
比如你只是想调整下颜色、线条大小和倾斜的角度,你都得打开作图软件来折腾一下。
现在我们可以使用CSS3伪元素及其背景渐变(gradient)来实现这一有趣而实用的效果。
我们观察下波浪线,有这么2个基本几何特征:
1. 波折线是重复的,可以被分解为若干相连的“角”形状
2. 这些“角”的连接点处是平滑过渡的,不能出现毛刺,所以需要对顶点处做平滑处理
对于(1),我们可以首先创建一个尖角形状(由一撇一捺2条短直线组成),然后使用x方向的repeat来重复。
对于(2),我们可以使用渐变色,模拟人手划线时,在转弯处力道减弱,我们在尖角相交处使用相对淡色,构造出圆角的视觉感受。
CSS3线性渐变我们注意到每个“角”都有2条边,如果以默认渐变轴(从上往下的一条垂直线)来看,左边的呈现45°倾斜,而右边的呈现315°倾斜。
那么如何创建一个45°的倾斜线呢?我们很容易想到用rotate变换,但是rotate是作用于整个元素上的,在这里并不适用。
我们换个思路,CSS3中的线性渐变(linear-gradient)可以完成上述要求,线性渐变的核心是渐变轴、起点终点和颜色值分布。
通过设置渐变轴的角度为45°,我们可以得到倾斜的特性,然后我们再把渐变宽度缩窄到一个线条的大小,具体代码如下:
div { background: linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%); background-size: 20px 20px; background-repeat: no-repeat;}
上面linear-gradient方法中的第一个参数是渐变轴角度,渐变将沿渐变轴开展,也就是渐变线的角度为45°。
后面的参数表示从0到45%的长度上为透明,45%到55%为红色渐变,55%到100%为透明。
也就是只有元素背景长度的10%出现渐变色(且是两边对称),第二行代码把背景的宽度设置为20px,那么渐变线的实际宽度为10px*10%=2px。
这样我们就得到了一根短折线,具备45°倾斜,且带渐变。
类似的,我们可以得到一根315°的渐变短折线:
div { background: -webkit-linear-gradient(315deg, transparent, transparent 45%, red, transparent 55%, transparent 100%),-webkit-linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%); background-size: 20px 20px; background-repeat: no-repeat;}
但是现在我们得到的是2条交叉的线条,形成一个“X”形状,这并不是我们想要的。
一个简单的技巧就是设置元素的高度为1/2,就得到了一个“V”形。
然后,我们把background-repeat设置为repeat-x,就得到了波浪线形状。
CSS3 :before伪元素我们还剩最后一步,我们需要把波浪线形状添加到文本下面,只要把上面的div元素改成对应文本的:before伪元素即可。
我们还可以设置不同的渐变颜色用以标注不同的文本。
你可以自己在线试试:http://wow.techbrood.com/fiddle/5868
by iefreer

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
