html下划线 下移,css如何实现下划线滑动效果

5268f80b9b1e01f982625ef6fac83ca1.png

fbdaea44cc4240c825b4ebdb2672376e.png

本文主要讲述两种下划线动效效果,第一种悬停时X轴由内向外展开实现动画效果,第二种为左右自动展示,由左向右,或由右向左。

实现的主要效果是利用伪类标签,以及hover,利用transfromm trition实现动画效果。

x轴由内向外展开

15c9be069c152df50195decffc24c2f5.png

利用贝塞尔曲线利用横线的动画实现,具体代码如下:ul {

display: flex;

padding: 0;

margin: 0;

list-style-type: none;

}

ul:hover li:not(:hover) a {

opacity: 0.2;

}

ul li {

position: relative;

padding: 30px 25px 30px 25px;

cursor: pointer;

}

ul li::after {

position: absolute;

content: "";

top: 100%;

left: 0;

width: 100%;

height: 2px;

background: #3498db;

transform: scaleX(0);

transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

}

ul li:hover::after, ul li.active::after {

transform: scaleX(1);

}

(推荐教程:CSS教程)

左右横移下划线动画特效

7bf24437d8e29f6da8670e9b187f30ff.png

主要利用js判断鼠标移开时的位置,对动画效果的进行左右移入移出显示

js代码如下:document.querySelectorAll('a').forEach(elem => {

elem.onmouseenter =

elem.onmouseleave = e => {

const tolerance = 5;

const left = 0;

const right = elem.clientWidth;

let x = e.pageX - elem.offsetLeft;

if (x - tolerance < left) x = left;

if (x + tolerance > right) x = right;

elem.style.setProperty('--x', `${x}px`);

};

});

css 利用伪类标签进行动画效果的动画实现

css代码如下:a {

position: relative;

font-weight: 600;

text-decoration: none;

color: rgba(0, 0, 0, 0.4);

transition: color .3s ease;

}

a::after {

--scale: 0;

content: '';

position: absolute;

left: 0;

right: 0;

top: 100%;

height: 3px;

background: #4c81c9;

-webkit-transform: scaleX(var(--scale));

transform: scaleX(var(--scale));

-webkit-transform-origin: var(--x) 50%;

transform-origin: var(--x) 50%;

transition: -webkit-transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);

transition: transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);

transition: transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);

}

a:hover {

color: #4c81c9;

}

a:hover::after {

--scale: 1;

}

相关教程推荐:css视频教程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/409344.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

已知网友建立html,职称计算机模拟试题:Dreamweaver网页设计模拟试题及答案(5)...

52、在使用时间链时&#xff0c;用“Record Path of Layer”命令记录层的路径&#xff0c;关于关键点的说法正确的是(CD)A、用户拖动层的速度越快&#xff0c;则划分出的关键点越多B、用户拖动层的速度越快&#xff0c;则划分出的关键点越少C、用户可以通过改变拖动的速度来变更…

r语言 将表格导出为csv_如何将R语言中表格数据输出为Excel文件.pdf

如何将R 语言中的表格数据输出为Excel 文件熊荣川六盘水师范学院生物信息学实验室xiongrongchuan126.com/u/Bearjazz平台的开放性使得R 语言具有了丰富的运算功能&#xff0c;使得一些表格数据不能在Excel 中实现的运算(或是较为繁琐的运算)可以在导入R 语言之后得到快速而容易…

安装Ecshop首页出现报错:Only variables should be passed by referen

出现下面这就话&#xff1a; Strict Standards: Only variables should be passed by reference in E:\Tools\ECShop_V2.7.3_UTF8_release1106\upload\includes\cls_template.phpon line 418第418行&#xff1a;$tag_sel array_shift(explode( , $tag)); 解决办法 1 5.3以上版…

html设计网页技巧,网页设计技巧:网页表格设计技巧总结

一个好的表格应该以易于理解&#xff0c;简单明了的方式传递大量的信息。真正的重点应该 放在信息上&#xff0c; 对表格的过度设计会抵消这种作用。从另一方面来说&#xff0c;巧妙的设计不仅可以使一个表格更具吸引力&#xff0c; 而且可以增加可读性。表格信息通常是很乏味的…

multi task训练torch_手把手教你使用PyTorch(2)-requires_gradamp;computation graph

import torch1. Requires_grad但是&#xff0c;模型毕竟不是人&#xff0c;它的智力水平还不足够去自主辨识那些量的梯度需要计算&#xff0c;既然如此&#xff0c;就需要手动对其进行标记。在PyTorch中&#xff0c;通用的数据结构tensor包含一个attributerequires_grad&#x…

【原】unity shader(3)反射贴图

改编自《cg教程--可编程实时图形学权威指南》上的demo。 反射向量计算公式 RI-2N(N*I) 备注N*I是点乘 I入射光线&#xff0c;N法向量 函数实现&#xff1a; float3 reflect(float3 I,float3 N) { return I-2.0*N*dot(N,I); } Shader "CG shader Reflect"{Propertie…

分时技术用户可以独占计算机资源,计算机基础第二章选择题(带答案修改版 )校过...

一,选择题(选择最确切的一个答案,将其代码填入括号中)1、操作系统是一种( ).A, 应用软件 B, 系统软件 C, 通用软件 D, 工具软件2、计算机系统的组成包括( ).A,程序和数据 B,处理器和内存 C,计算机硬件和计算机软件 D,处理器,存储器和外围设备3、下面关于计算机软件的描述正确的…

div显示在上层_DIV重叠 如何优先显示(div浮在重叠的div上面)

如果有2个div有重叠&#xff0c;默认是根据html解析顺序&#xff0c;最后加载的优先级最高(浮在最上面)。问题&#xff1a;如果想把前面加载的div显示在最上面&#xff1f;关键字&#xff1a;z-index举例&#xff1a;--原来的页面&#xff1a;first div是被second div盖住了&am…

计算机专业英语的时态特点,英语时态表的学习与整理

学习英语必须要了解英语的各种时态&#xff0c;不了解时态会说话时闹出笑话&#xff0c;也会引出歧义&#xff0c;做题的时候也会出错。所以英语的时态一定要分清也要记牢&#xff0c;无论什么时候运用英语的时候都不要忘记。现在就和沪江小编一起了解了解吧!英语时态表 时态名…

el replace 表达式_EL表达式运算符、常用函数详解

运算符&#xff1a;1.算术运算符有五个&#xff1a;、-、*或$、/或div、%或mod2.关系运算符有六个&#xff1a;或eq、!或ne、或gt、<或le、>或ge3.逻辑运算符有三个&#xff1a;&&或and、||或or、!或not4.其它运算符有三个&#xff1a;Empty运算符、条件运算符、…

[短彩信]C#短彩信模块开发设计(2)——配置

准备从以下几个方面简单的谈谈短彩信模块的实现&#xff1a; [短彩信]C#短彩信模块开发设计&#xff08;1&#xff09;——架构&#xff08;http://www.cnblogs.com/CopyPaster/archive/2012/12/07/2806776.html&#xff09;[短彩信]C#短彩信模块开发设计&#xff08;2&#xf…

python管理工具ports_Python options.port方法代码示例

本文整理汇总了Python中tornado.options.port方法的典型用法代码示例。如果您正苦于以下问题&#xff1a;Python options.port方法的具体用法&#xff1f;Python options.port怎么用&#xff1f;Python options.port使用的例子&#xff1f;那么恭喜您, 这里精选的方法代码示例或…

html5 canvas文字颜色,我可以通过HTML5 Canvas中的字符文本颜色来做吗?

我告诉你这个解决方法.基本上你一次输出一个字符,并使用内置的measureText()函数来确定每个字母的宽度.然后我们将我们想要绘制的位置偏移相同的数量.您可以修改此代码段,以产生所需的效果.假设我们有这样的HTML&#xff1a;和Javascript一样&#xff1a;var canvas document.…

转移指令总结

转移指令&#xff1a;可以修改ip的指令。无条件转移 jmp(1) jmp short s 标号&#xff0c;短转移&#xff1a;用一个字节表示大小&#xff0c;范围为-128--127 (2) jmp near ptr s 标号&#xff0c;近转移&#xff1a;用两个字节表示大小&#xff0c;范围为-32768--32767(3) …