HTML5如何实现跨越多行的自定义颜色文本下划线

custom colored underline that span multiple lines

h5, example

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4224
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var gradientAPI = [{
    name: 'warmFlame',
    direction: '90deg',
    colors: ['#ff9a9e', '#fad0c4'],
    positions: ['0%', '100%']
}, {
    name: 'youngPassion',
    direction: '90deg',
    colors: ['#ff8177', '#ff867a', '#ff8c7f', '#f99185', '#cf556c', '#b12a5b'],
    positions: ['0%', '0%', '21%', '52%', '78%', '100%']
}, {
    name: 'newLife',
    direction: 'to right',
    colors: ['#43e97b', '#38f9d7'],
    positions: ['0%', '100%']
}, {
    name: 'temptingAzure',
    direction: '120deg',
    colors: ['#84fab0', '#8fd3f4'],
    positions: ['0%', '100%']
}, {
    name: 'ripeMalinka',
    direction: '120deg',
    colors: ['#f093fb ', '#f5576c'],
    positions: ['0%', '100%']
}];

var randNumInRange = function randNumInRange(max) {
    return Math.floor(Math.random() * max);
};

var mergeArrays = function mergeArrays(arrOne, arrTwo) {
    return arrOne.map(function(item, i) {
        return item + ' ' + arrTwo[i];
    }).join(', ');
};

var buildGradient = function buildGradient(obj) {
    return 'linear-gradient(' + obj.direction + ', ' + mergeArrays(obj.colors, obj.positions) + ')';
};

var gradient = buildGradient(gradientAPI[randNumInRange(gradientAPI.length)]);

var magicalUnderlines = Array.from(document.querySelectorAll('.underline--magical'));

magicalUnderlines.forEach(function(underline) {
    underline.style.backgroundImage = gradient;
});

编译

CSS

HTML

custom colored underline that span multiple lines

h5, example

编辑器支持Emmet

快捷键

custom colored underline that span multiple lines

h5, example

HTML5一个可自定义文本的动画加载器

HTML5一款黑白色调的自定义下拉列表选择框

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：