CSS3 鼠标上移后底部线条从中间向两边展开

0 156 2023-12-23 12:00:31

本文目录

1. css代码如下

CSS3 鼠标上移后底部线条从中间向两边展开，效果比较高级，要如何实现呢？

css代码如下

.header-nav li a:after {
	content: "";
	height: 3px;
	position: absolute;
	bottom: 0;
	left: 51%;
	right: 51%;
	z-index: -1;
	background-color: #d82019;
	-o-transition-property: left, right;
	-moz-transition-property: left, right;
	transition-property: left, right;
	-webkit-transition-property: left, right;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	-moz-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-transition-timing-function: ease-out;
}
.header-nav li:hover a:after{
	left: 0;
	right: 0;
	z-index: 1;
}

这样，我们就实现了CSS3 鼠标上移后底部线条从中间向两边展开的动画效果。

本文地址：https://xzo.com.cn/develop/js/1182.html

有帮助，很赞！

信息来源：下载鸥

业务合作

如果您认可我们的分享，有意与我们合作开展帝国cms网站建设与开发业务或插件定制，请联系右侧在线客服。我们能给您的，就是高质量的模板与售后。

版权声明

标注了信息来源为下载鸥的文章皆为原创，如果是转载的优质文章，我们也都标注了出处。如果您喜欢我们的文章，请按照下载鸥所标注的文章出处进行标注，谢谢您的配合。

信息标签

CSS3动画

CSS

怎样用css3让多行文字垂直居中于父元素？ CSS3 长方形切掉右下角（不规则五边形） CSS3之弹性盒子布局flex（文字版） css清除浮动导致布局错乱的3个方法 css设置单行滑动显示效果的两种方案 css实现图片从左到右滑入并淡入的特效 css3 循环滚动动画demo CSS3动画产品上下循环轻微跳动 Animate.css bootstrap CSS实现横向滚动帝国cms怎样将过期下架产品设为灰色 css变量函数 var() CSS3 鼠标上移后底部线条从中间向两边展开 CSS3弹性盒子常用属性介绍 CSS3动画：鼠标上移后颜色从中间向两边填充一个简单的css+jQuery制作的开关样式帝国cms按钮怎样做高光划过的CSS3动画效果？弹性盒子布局全解（多图） animate.css在线调试，支持直接复制样式名

导出教程下载word版教程

关于JS/JQuery

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript十分强大，不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理，都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。

js判断windows操作系统还是mac os系统

js网站视频播放器ckplayer和dplayer优缺点分析

Vue在npm run serve时报错Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be pr

推荐JS/JQuery开发教程

JavaScript过滤XSS攻击方法 什么是XSS？XSS（Cross Site Scripting），跨站脚本攻击，是一种允许攻击者在另外一个...: 1 323

JS验证手机是否11位的做法 在网站表单提交前，我们往往需要验证一下信息避免错误数据，那么，怎样验证手机号...: 1 373

jquery怎样获取textarea用户输入的行数？ jQuery是一个相当好用的js插件，通过jquery我们可以实现很多功能，例如今天要介...: 0 497

怎样点击清除ul里的全部li信息？ 在通过jQuery做数据交互时我们可能存在这样的需求：通过点击按钮清空ul里的li...: 1 448

Superslide响应式页面直接应用手机端技巧介绍 如果是响应式网站，那么用superslide做轮播图需要做两个，这无疑是非常不方便的...: 1 425

$(window).height() 和 $(document).height()有什么不同？ 我们常用$(window).height() 和 $(document).height()来监听当前高度，但这个...: 1 335

JS点击复制data-*属性（支持多个元素） 分享一段js原生点击复制data-*属性的源码，根据onclick事件触发，复制当前元素...: 0 343

jQuery怎样给图片添加默认域名？ 在很多网站中，图片的默认路径是相对于根目录的绝对路径，如果是其他站点引用，则...: 0 419

推荐插件

帝国cms在线考试系统模板插件 一直没看到好用的帝国cms在线考试插件，所以自己开发了一款。在线考试插件用...: 0 1183

帝国cms访问统计ip地址链接与封禁插件下载 下载鸥开发了这款帝国cms封禁ip插件，自动记录访问情况，让我们可以更快的识别...: 0 897

帝国cms纳米数据接口（足球比赛中最新数据） 帝国cms 对接纳米数据（www.nami.com）接口，本接口主要接收、整理足球比赛实时数...: 0 191

帝国cms多栏目多数据表自动审核推送插件 本插件基于帝国cms帝国cms每日自动审核插件，在自动审核指定条数信息的基础上...: 0 804

帝国cms百度AI图像去雾api接口对接插件 通过本插件，可以实现帝国cms网站对接百度云api实现图像去雾的功能。经过实际...: 0 374

帝国cms自动生成文章新闻目录插件下载 用户体验是我们的需求，百度蜘蛛的认可更是我们的需求。毕竟，没有收录排名，何来...: 0 988

帝国cms网站会员登录与退出历史记录日志插件 帝国cms默认只有上次登录时间与ip，没有一个记录清单，所以今天，我们分享这个帝...: 0 284

帝国cms智能自动审核按星期几审核指定栏目带推送插件 采集站的必备资源是自动审核，要做到日收录也离不开定时发布。而本插件的自动...: 0 1154