找回密码
当前位置：前端开发者 > HTML > 正文

前端开发H5+CSS3 鼠标移走,下划线也跟着走的动画过渡效果

2018-11-29 22:46:41 分类：HTML 阅读(205) 评论(0)
前端开发兼容360浏览器
浏览器内核 前端开发
那个浏览器适合前端开发者

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <script src=”https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js”></script>
        <style>
            ul {
                position: relative;
                display: inline-block;
                border: 1px solid #ddd;
                font-size: 0;
                box-sizing: border-box;
                padding: 0px;
            }
            ul li {
                position: relative;
                float: left;
                display: inline-block;
                height: 50px;
                text-align: center;
                line-height: 50px;
                color: #333;
                box-sizing: border-box;
                margin: 0px;
                padding: 0px;
                font-size: 16px;
                font-family: ‘Microsoft YaHei’, sans-serif;
            }
            a {
                display: inline-block;
                padding: 0 25px;
                color: #373d41;
                -webkit-transition: color 0.2s;
                transition: color 0.2s;
                text-decoration: none;
            }
            a:hover {
            }
            /* ul li:hover{
border-bottom: 3px solid #00c1de;
} */
            .line {
                position: absolute;
                left: 0px;
                height: 3px;
                width: 0;
                padding: 0;
                background-color: #00c1de;
                bottom: 0;
                -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .line:after {
                visibility: hidden;
                display: block;
                font-size: 0;
                content: ‘ ‘;
                clear: both;
                height: 0;
            }
        </style>
        <script>
            $(function() {
                $(‘ul li’).hover(function() {
                    l = $(‘ul li’).width()
                    m = $(this).index()
                    $(‘.line’).css({ width: l, left: l * m })
                })
            })
        </script>
    </head>
    <body>
        <ul>
            <li><a href=”###”>首页</a></li>
            <li><a href=”###”>页面</a></li>
            <li><a href=”###”>页面</a></li>
            <li><a href=”###”>页面</a></li>
            <li><a href=”###”>页面</a></li>
            <li><a href=”###”>页面</a></li>
            <a class=”line”></a>
        </ul>
    </body>
</html>
web前端开发浏览器兼容
前端开发浏览器兼容
360浏览器 前端开发者
» 本文来自：前端开发者 » 《前端开发H5+CSS3 鼠标移走,下划线也跟着走的动画过渡效果》
» 本文链接地址：https://www.rokub.com/6866.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论