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);
    }
  • 相关阅读:
    点击cell后 cell的背景不变,cell上的字体颜色发生改变的功能实现
    各种属性设置
    多列表 ,菜单
    正则表达式
    多个storyboard之间的跳转问题
    关于uicollectionview的个人学习
    uiscrollview的自动布局
    手动自动布局
    关于简单的跳转问题
    深入理解@class和#import的区别
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10281524.html
Copyright © 2011-2022 走看看