首页 > 其他分享 >文字下滑线渐变效果

文字下滑线渐变效果

时间:2024-03-24 11:34:10浏览次数:20  
标签:文字 3px sit color 渐变 下滑 background 100% size

实现效果

实现代码

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  <a
    >Mollitia nostrum placeat consequatur deserunt velit ducimus possimus
    commodi temporibus debitis quam</a
  >, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium
  vero.
</p>
p {
  width: 600px;
  font-size: 24px;
  color: #666;
}

a {
  background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff);
  background-size: 0 3px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: 1s all;
  color: #0cc;
}

a:hover {
  background-size: 100% 3px;
  color: #000;
}

标签:文字,3px,sit,color,渐变,下滑,background,100%,size
From: https://www.cnblogs.com/codejnp/p/18092196

相关文章

  • 计算机组成原理 练习卷 第2章第1节数据与文字的表示方法(解析版)(正确答案版)
    一、(共18题,共90分)1.若一个数的编码是10000111,它的真值为+7,则该编码是       。(单选题本题5分)A原码B反码C补码D移码正确答案:D解:如果为原码,真值为-7,同理B的反码和C的补码都为负数,只有移码才为正数。2.计算机内常采用______作为字符编码。(单选题本题......
  • Vue3 - Element Plus 下拉选择器 el-select 覆盖修改 placeholder样式,解决覆盖不生效
    前言如果需要Vue2版本,请访问这篇文章。本文实现了在vue3+element-plus网站开发中,完美覆盖el-select选择器样式,强力修改select下拉选择框placeholder样式,同时也支持修改文字、大小、边框、等,支持任意样式的覆盖修改!网上的教程几乎都不生效,使用本教程的方法......
  • 2024.03.22【文字海报】如何使用文字来展现中文排版的高级感
    上图这行字除了使用英文以外,它还使用了衬线体。衬线体能够体现出字体的复古文艺的感觉;相应的,如果换成了非衬线体,就会体现出一种现代简约的感觉,相同的文字不同的字体能够带给人们不一样的视觉感受。通过这些主体文字的语言,你就能感受到强烈的风格。当主体变成中文时,画面中这个......
  • 语音转文字——sherpa ncnn语音识别离线部署C++实现
    简介Sherpa是一个中文语音识别的项目,使用了PyTorch进行语音识别模型的训练,然后训练好的模型导出成torchscript格式,以便在C++环境中进行推理。尽管PyTorch在CPU和GPU上有良好的支持,但它可能对资源的要求较高,不太适合嵌入式环境或要求轻量级依赖的场景。考虑到模......
  • 使用tencentcloud-sdk-php库通用印刷体识别GeneralBasicOCR文字识别PHP代码完整版
    使用tencentcloud-sdk-php进行通用印刷体识别(GeneralBasicOCR),您需要先确保已经按照上述步骤安装了该SDK,并在腾讯云控制台上获取了您的SecretId和SecretKey。代码开始:<?phprequire'vendor/autoload.php';//根据您的项目结构引入autoload文件useTencentCloud\Comm......
  • revit二开中文字注释族导出cad后出现翻转的问题
    在revit中存在该一个导出cad的BUG即:revit中的文字注释族中的文字是可以有“可读”选项的,而CAD中是没有该选项的,所以会出现revit导出cad后文字翻转的情况 解决方案跟revit导出cad的机制有关,revit针对自定义族导出到cad中是这样一个机制:同一个形状只导出一个块。解决方案:将文......
  • 2024.03.19【文字排版】作为设计师 这三个功能不用还是尽量别用
    第一个功能-黑色加粗的“B”它是Bold的简写,可以通过这一功能将字体给加粗加大一号。可是实际上这个功能并不是把字体变成大一号,而是单纯的给字体加上一个外轮廓,这样不仅破坏了设计师原本的字形轮廓设计,可选粗细单一而且会使得字体变形,看着不美观也不自然所以大部分字库都会......
  • vue3+element plus 判断文字是否溢出,溢出显示el-tooltip
    用到elementplus表格,:show-overflow-tooltip="true"属性在 "element-plus":"2.2.27",版本不支持修改el-tooltip文本的样式: 满足2点需求:①文字只有一行不显示悬浮框;②超出一行显示省略号,鼠标有悬浮框,且保留文本的换行效果。关键代码:<el-table-columnlabel="建议内容......
  • 身份证文字识别ocr免费-身份证实名认证接口-护照识别-Java调用代码
    文字识别技术是针对图片上的文字进行提取,免去人们手动输入的繁琐。针对证件,翔云提供了身份证识别接口、身份证实名认证接口、护照识别接口,身份证识别接口自动提取身份证信息、身份证实名认证接口实时联网查验身份证的真伪。以身份证识别接口Java语言代码为例,欢迎免费体验:pac......
  • powerpoint:镂空文字
    一,创建矩形和文本框在图片上添加一个矩形,在矩形上添加一个文本框:说明:刘宏缔的架构森林—专注it技术的博客,网址:https://imgtouch.com本文: https://blog.imgtouch.com/index.php/2024/03/02/powerpoint-lyu-kong-wen-zi/代码: https://github.com/liuhongdi/ 或 https:......