css实现导航鼠标悬停走动酷炫效果

2021-09-25   阅读:1740   类型:前端   分类:style    标签: style html

我们有时做项目需要使用到类似上面的效果,可以参考下面的代码实现方法

html页面代码:

   <div class="header">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">最新活动</a></li>
          <li><a href="#">项目介绍</a></li>
          <li><a href="#">关于我们</a></li>
          <span class="move"> </span>
        </ul>
    </div>

css代码实现:

 <style>
* {
  padding: 0px;
  margin: 0px;
}
body{
  min-width: 1280px;
}
.header {
  height: 56px;
  width: 100%;
  border: 1px solid gray;
}
div.logo {
  float: left;
  margin: 10px 50px;
}

div.logo span {
  font-size: 23px;
  display: block;
  float: right;
}
ul {
  list-style-type: none;
  padding: 0px;
  float: right;
  position: relative;/*子元素absol*/
}
ul img{
  position: relative;
  top: 3px;
}
ul li {
  width: 110px;
  height: 56px;
  text-align: center;
  float: left;
}
ul li a {
  color: #848789;
  text-decoration: none;
  line-height: 56px;
}
ul a:hover{
  color: red;
}
.move{
  height: 4px;
  width: 110px;
  border-top: 4px solid red;/*只需要将上边显示出来*/
  position: absolute;
  left: 0;
  top: 52px;
  transition: left .2s ease-in-out 0s;/*包含四个过度属性:执行变换属性、执行时间、速率、延迟*/
  -webkit-transition: left .2s ease-in-out 0s;/*chrome和safari*/
  -moz-transition: left .2s ease-in-out 0s;/*firefox*/
  -o-transition: left .2s ease-in-out 0s;/*opera*/
}
li:nth-child(1):hover~ .move{  /*li元素的父元素的第一个子元素,当鼠标停留其上时,move元素的left属性改变*/
  left: 0px;
}
li:nth-child(2):hover~ .move{
  left: 110px;
}
li:nth-child(3):hover~ .move{
  left: 220px;
}
li:nth-child(4):hover~ .move{
  left: 330px;
}
li:nth-child(5):hover~ .move{
  left: 440px;
}
li:nth-child(6):hover~ .move{
  left: 550px;
}
</style>

使用上面的代码就可以实现出上图所示效果,供大家参考。

【腾讯云】2核2G云服务器新老同享 99元/年,续费同价,云服务器3年机/5年机限时抢购,低至 2.5折

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://tpxhm.com/fdetail/828.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×