zoukankan      html  css  js  c++  java
  • 23.纯 CSS 创作一个菜单反色填充特效

    原文地址:https://segmentfault.com/a/1190000014876348

    HTML代码:

    <nav>
        <ul>
            <li><span>Home</span></li>
        </ul>
    </nav>

    CSS代码:

    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(to right bottom,gold, chocolate);
    }
    /* 为容器设置宽高,此处定义的变量 x 和 y 后面还会用到 */
    :root{
        --x: 5em;
        --y: 1.5em;
    }
    nav ul{
        padding: 0;
    }
    nav ul li{
        position: relative;
        width: var(--x);
        height: var(--y);
        line-height: var(--y);
        list-style-type: none;
        font-size: 40px;
        text-align: center;
        font-family: sans-serif;
        background-color: white;
        border: 2px solid black;
        overflow: hidden;
    }
    /* 用伪元素画出一个小球,放到菜单项左端 */
    nav ul li::before {
        content: '';
        position: absolute;
        height: var(--y);
        width: var(--y);
        background-color: black;
        border-radius: 50%;
        top: 0;
        left: calc(-1 * var(--y) / 2);
        transition: 0.5s ease-out;
    }
    /* 用 mix-blend-mode 设置色彩混合模式,使小球覆盖的文字反色显示 */
    nav ul li span{
        color: white;
        mix-blend-mode: difference;
    }
    /* 增加动画,使小球从左侧滚到右侧 */
    nav ul li:hover::before {
        --r: calc(var(--x) * 1.2);
        height: var(--r);
        width: var(--r);
        /* 利用圆的变大覆盖长方形,可以将li中 overflow: hidden; 注释查看 */
        top: calc(-1 * var(--r) / 2 + var(--y) / 2);
        left: calc(-1 * var(--r) / 2 + var(--x) / 2);
    }
  • 相关阅读:
    bzoj 3238
    bzoj 3473 后缀自动机多字符串的子串处理方法
    bzoj 2998 第k小字串
    bzoj 3672 利用点分治将CDQ分治推广到树型结构上
    bzoj 3671 贪心
    NOIP模拟题——nan
    NOIP模拟题——kun(栈)
    hduP2586——How far away ?
    DP习题
    NOIP模拟题——来自风平浪静的明天
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10281524.html
Copyright © 2011-2022 走看看