zoukankan      html  css  js  c++  java
  • css光标下划线跟随效果

    直接上代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                ul {
                    display: flex;
                    position: absolute;
                    width: 1000px;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                }
    
                li {
                    position: relative;
                    padding: 20px;
                    font-size: 24px;
                    color: #000;
                    line-height: 1;
                    transition: 0.2s all linear;
                    cursor: pointer;
                    list-style: none;
                }
    
                li::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 100%;
                    width: 0;
                    height: 100%;
                    border-bottom: 2px solid #000;
                    transition: 0.2s all linear;
                }
    
                li:hover::before {
                    width: 100%;
                    top: 0;
                    left: 0;
                    transition-delay: 0.1s;
                    border-bottom-color: #000;
                    z-index: -1;
                }
    
                li:hover~li::before {
                    left: 0;
                }
    
                li:active {
                    background: #000;
                    color: #fff;
                }
            </style>
        </head>
        <body>
            <div>
                <ul>
                    <li>不可思议的CSS</li>
                    <li>导航栏</li>
                    <li>光标小下划线跟随</li>
                    <li>PURE CSS</li>
                    <li>Nav Underline</li>
                </ul>
            </div>
        </body>
    </html>
  • 相关阅读:
    sort()
    type()
    reverse()
    pop()
    remove()
    max()
    len()
    Ext.Js核心函数( 三)
    聚簇索引和非聚簇索引区别
    Ext.js入门(二)
  • 原文地址:https://www.cnblogs.com/chao202426/p/11192978.html
Copyright © 2011-2022 走看看