实现漂亮的超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.6/dist/css/bootstrap.css"/>
    <script src="/bak/js/vendor/angular-1.5.8.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="nav">
<header>
</header>

<nav role="navigation" aria-label="main navigation" class="container nav-container overflowing">
    <div class="nav-scroll">
        <ul class="nav-inner">
            <li ng-repeat="tab in tabNames" class="nav-item active">
                <a>{{tab.name}}</a>
            </li>
            <li ng-repeat="tab in tabNames" class="nav-item">
                <a>{{tab.name}}</a>
            </li>
            <li class="nav-item help">
                <a href="#" target="_blank" rel="noopener noreferrer">
                    <span translate="NAV_Help">Help</span>
                </a>
            </li>
        </ul>
    </div>
</nav>
<footer>尾巴</footer>
<script>
    // active
    var app = angular.module("myApp", []);

    app.controller("nav", function ($scope) {
        $scope.tabNames = [
            {
                "name": "Alfreds Futterkiste",
                "cx": "Germany"
            }]
    })
</script>
</body>
<style>
    .nav-container .nav-scroll {
        border-bottom: 2px solid #fff;
        display: inline-block;
        font-size: 0;
        margin-bottom: 20px;
        min-width: 100%;
        padding: 5px 0 0;
        vertical-align: middle
    }

    .nav-container .nav-scroll .nav-inner .nav-item {
        display: inline-block;
        font-size: 0
    }

    .nav-container .nav-scroll .nav-inner .nav-item a {
        color: #095f79;
        display: block;
        font-size: 16px;
        font-weight: 300;
        padding: 10px;
        white-space: nowrap;
        position: relative;
        min-height: 2.75rem
    }

    /* 超链接移动时效果,下斜线 */
    .nav-container .nav-scroll .nav-inner .nav-item a:after {
        content: "";
        background: #0e97c0;
        height: 2px;
        width: 100%;
        left: 0;
        position: absolute;
        bottom: -1px;
        -webkit-transition: all .25s ease 0s;
        -o-transition: all .25s ease 0s;
        transition: all .25s ease 0s;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0)
    }

    .nav-container .nav-scroll .nav-inner .nav-item.active a, .nav-container .nav-scroll .nav-inner .nav-item a:focus, .nav-container .nav-scroll .nav-inner .nav-item a:hover {
        color: #0e97c0;
        text-decoration: none;
        -webkit-transition: all .25s ease 0s;
        -o-transition: all .25s ease 0s;
        transition: all .25s ease 0s
    }

    .nav-container .nav-scroll .nav-inner .nav-item.active a:after,
    .nav-container .nav-scroll .nav-inner .nav-item a:focus:after,
    .nav-container .nav-scroll .nav-inner .nav-item a:hover:after {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all .25s ease 0s;
        -o-transition: all .25s ease 0s;
        transition: all .25s ease 0s
    }
</style>
</html>





发表于: 2月前   最后更新时间: 2月前   游览量:201
上一条: HTML5布局新元素header、nav、section、article、aside、footer
下一条: css3-Media Query根据设备调整css

评论…


  • 评论…
    • in this conversation