js中下划线动画实例代码

<ul class="ddd">
 <li class="solid active">啦啦啦啦</li>
 <li class="solid">我哦我我</li>
 <li class="solid">哦哦哦哦</li>
 <li class="solid">噢噢噢噢</li>
 <li class="solid">雅黑雅黑</li>
</ul>

使用伪类 css

<style>
   .solid {
     margin-top: 200px;
     margin-left: 100px;
     text-align: center;
     width: 100px;
     height: 50px;
     position: relative;
     float: left;

   }
   .solid:after {
     content: '';
     position: absolute;
     left: 50%;
     bottom: 15px;
     margin-left: 0%;
     width: 0%;
     height: 2px;
     background-color: #FF3401;
     transition: all 0.3s ease-in-out;
   }
   .solid:hover:after {
     width: 100%;
     margin-left: -50%;
     background-color: #FF3401;

   }
   .solid.active:after,
   .solid:hover:after {
        width: 100%;
       margin-left: -50%;
     }
     .solid.active.dis:after{
       width: 0%;
       margin-left: 0%;
     }
 </style>

初始化 第一个

<script>

   $(".ddd .solid").hover( function(event){

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

51

查看详情

$(".solid.active").addClass('dis');

}, function(event){

$(".solid.active").removeClass('dis');

   } );

   </script>

以上就是js中下划线动画实例代码的详细内容，更多请关注php中文网其它相关文章！