CSS3导航效果

最新推荐文章于 2021-09-03 21:52:55 发布

Travelling1006

最新推荐文章于 2021-09-03 21:52:55 发布

阅读量111

点赞数

原文链接：http://www.cnblogs.com/talentzemin/p/5784028.html

版权

来自codepen http://codepen.io/mouradhamoud/pen/RRvVZp

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body { background-color: #444; }
        .menu { background-color: #FF8800; list-style: none; padding: 0px; margin: 0 auto; width: 100%; text-align: center; }
            .menu li { display: inline-block; }
                .menu li a { color: transparent; padding: 10px 20px; margin: 0px; display: inline-block; font-family: 'Lato', sans-serif; font-size: 18px; text-decoration: none; text-transform: uppercase; background-color: #FF8800; position: relative; overflow: hidden; }
                    .menu li a::before { content: attr(data-title); display: block; padding: 10px 20px; position: absolute; top: 0%; left: 0px; color: #FFF; transition: all 0.5s; }
                    .menu li a::after { content: attr(data-title); display: block; padding: 10px 20px; position: absolute; top: 100%; left: 0px; color: #FFF; font-weight: bold; font-size: 19px; transition: all 0.5s; }
                    .menu li a:hover::before { top: -100%; }
                    .menu li a:hover::after { top: 0%; }
    </style>
</head>
<body>
    <ul class="menu">
        <li><a href="#" data-title="Home">Home</a></li>
        <li><a href="#" data-title="Features">Features</a></li>
        <li><a href="#" data-title="Pricing">Pricing</a></li>
        <li><a href="#" data-title="Contact">Contact</a></li>
    </ul>
</body>
</html>

转载于:https://www.cnblogs.com/talentzemin/p/5784028.html

Travelling1006

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3导航效果

来自codepenhttp://codepen.io/mouradhamoud/pen/RRvVZp<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> ...
复制链接

扫一扫