使用wordpress建立个人网站,西安建设厅网站,新软件推广,单位内部网站建设调研一、前言
实现功能: 这案例是一个具有动态效果的导航栏。导航栏的样式设置了一个灰色的背景#xff0c;并使用flex布局在水平方向上平均分配了四个选项。每个选项都是一个li元素#xff0c;包含一个文本和一个横向的下划线。 当鼠标悬停在选项上时#xff0c;选项的文本颜色…一、前言
实现功能: 这案例是一个具有动态效果的导航栏。导航栏的样式设置了一个灰色的背景并使用flex布局在水平方向上平均分配了四个选项。每个选项都是一个li元素包含一个文本和一个横向的下划线。 当鼠标悬停在选项上时选项的文本颜色会变为粉红色并且下划线会从中间向两边展开呈现出一种动态的效果。 这种导航栏可以用于网页或应用程序中提供简洁且有吸引力的导航选项。
实现逻辑
创建一个导航栏容器div并设置其类名设置为.nav。在导航栏容器中创建四个选项即li元素每个选项包含一个文本和一个下划线。为每个选项设置样式包括设置宽度、高度、文本对齐方式、行高和相对定位。为每个选项的下划线i元素设置样式包括设置宽度为0%初始状态下不可见、高度为3px、背景色、绝对定位和过渡效果。当鼠标悬停在选项上时为选项设置:hover伪类样式改变文本颜色为粉红色。当鼠标悬停在选项上时为选项下划线i元素设置:hover伪类样式将下划线从中间向两边展开即将left属性设置为0将宽度设置为100%。设置过渡效果使下划线的展开效果具有动画效果。
二、项目运行效果
三、全部代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title动态导航栏文字/titlestyle*{padding: 0;margin: 0;list-style: none;}.nav{display: flex;width: 500px;height: 100px;margin: 100px auto;justify-content: space-around;align-items: center;background-color: rgb(205, 223, 248);border-radius: 10px;}.nav li{position: relative;width: 100px;height: 50px;text-align: center;line-height: 50px;transition:.5s all;cursor: pointer;}.nav li i{display:block; width: 0%;height: 3px;background-color: rgb(255, 0, 119);position: absolute;bottom: 0px;left: 50%;transition:.5s all;}.nav li:hover {color: rgb(255, 0, 119);letter-spacing: 4px;}.nav :hover i{left:0; width:100%;}/style
/head
bodydiv classnavli1111i/i/lili2222i/i/lili3333i/i/lili4444i/i/li/div
/body
/html
四、答疑解惑 这是一个非常适合前端入门练习的小案例各位小伙伴可以自行更改样式和内容如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主QQ。 还多请各位小伙伴多多点赞支持你们的支持是我最大的动力。
博主QQ1196094293
谢谢各位的支持~~
