静态波浪线一:
<template>
<div>
<wavy></wavy>
</div>
</template>
<style lang="scss" scoped>
* {
padding: 0;
margin: 0;
border: none;
line-height: 1;
}
wavy {
display: block;
height: .5em;
white-space: nowrap;
letter-spacing: 100vw;
padding-top: .5em;
overflow: hidden;
}
wavy::before {
content: "\2000\2000";
/* IE浏览器实线代替 */
text-decoration: overline;
/* 现代浏览器 */
text-decoration: overline wavy;
}
</style>
优点:这种实现方法的优点在于非常容易理解,非常容易上手,然后的话颜色很好控制,使用color
属性就好啦。大小也非常容易控制,使用font-size
属性就好了。
原理:伪元素生成两个空格,使用letter-spacing
属性控制两个空格占据的宽度足够宽,这样空格字符的装饰线的尺寸一定可以充满整个容器,此时只要设置装饰线的类型是波浪线,宽度100%自适应的波浪线效果就实现了。
静态波浪线二、
<template>
<div>
<wavy></wavy>
</div>
</template>
<style lang="scss" scoped>
* {
padding: 0;
margin: 0;
border: none;
line-height: 1;
}
wavy {
display: block;
height: .5em;
padding-top: .5em;
text-align-last: justify;
}
wavy::before {
content: '\3000\3000';
text-decoration-style: wavy;
text-decoration-line: overline;
}
</style>
优点:利用text-align-last
属性,代码更轻便,更容易理解,更优雅
原理就是设置两个空格字符,然后两端对齐,这个时候的波浪线自然就正好横跨整个元素了。
动态波浪线一(利用径向渐变纯CSS实现)、
<template>
<div>
<a href="javascript:" class="flow-wave">hover我(移动端按下)</a>
</div>
</template>
<style lang="scss" scoped>
* {
padding: 0;
margin: 0;
border: none;
line-height: 1;
}
.flow-wave {
padding: 5px 0;
color: red;
}
.flow-wave:hover,
.flow-wave:focus {
background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,
radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
background-size: 20px 20px;
background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
animation: waveFlow 1s infinite linear;
}
@keyframes waveFlow {
from {
background-position-x: -10px, 0;
}
to {
background-position-x: -30px, -20px;
}
}
</style>
动态波浪线二(利用SVG波形矢量图作为背景实现)、
<template>
<div>
<a href="javascript:" class="svg-wave">hover我(移动端按下)</a>
</div>
</template>
<style lang="scss" scoped>
* {
padding: 0;
margin: 0;
border: none;
line-height: 1;
}
.svg-wave {
text-decoration: none;
background: url("data:image/svg+xml,") repeat-x 0 100%;
background-size: 20px auto;
}
.svg-wave {
animation: waveMove 1s infinite linear;
}
@keyframes waveMove {
from { background-position: 0 100%; }
to { background-position: -20px 100%; }
}
</style>
优点是线条边缘平滑,效果细腻,易理解,易上手,易维护。
缺点也很明显,就是波浪线的颜色无法实时跟着文字的颜色发生变化,适用于文字颜色不会多变的场景。
如果我们想要改变波浪线的颜色也很简单,修改background
代码中的stroke='#333'
这部分,'#'
就是就是#
,因此,stroke='#333'
其实就是stroke='#333'
的意思。例如,我们需要改成红色略带橙色,可以stroke='#F30'
,也可以写完整stroke='#FF3300'
。