zoukankan      html  css  js  c++  java
  • 32.纯 CSS 创作六边形按钮特效

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

    感想:简简单单的动画特效,位置,动画。

    HTML代码:

    <nav>
        <ul>
            <li>Home</li>
            <li>Products</li>
            <li>Services</li>
            <li>Contact</li>
        </ul>
    </nav>
    <nav>
        <ul>
            <li>Home</li>
            <li>Products</li>
            <li>Services</li>
            <li>Contact</li>
        </ul>
    </nav>
    <nav>
        <ul>
            <li>Home</li>
            <li>Products</li>
            <li>Services</li>
            <li>Contact</li>
        </ul>
    </nav>

    CSS代码:

    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav{
        --h: 3em;
    }
    nav:nth-child(1){
        --rate: 1.5;
        --bgcolor: black;
    }
    nav:nth-child(2){
        --rate: 1.732;
        --bgcolor: brown;
    }
    nav:nth-child(3){
        --rate: 2;
        --bgcolor: green;
    }
    nav ul{
        padding: 0;
    }
    nav ul li{
        position: relative;
        list-style-type: none;
        width: calc(var(--h) * var(--rate));
        height: var(--h);
        line-height: var(--h);
        margin: 2em;
        background-color: var(--bgcolor);
        color: white;
        font-family: sans-serif;
        text-align: center;
    }
    /* 用伪元素增加2个倾斜的矩形 */
    nav ul li::before,
    nav ul li::after{
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        /* inherit : 继承 */
        width: inherit;
        height: inherit;
        background-color: var(--bgcolor);
        z-index: -1;
        filter: opacity(0);
        transition: 0.3s;
    }
    nav ul li::before{
        /* 角度 位置 */
        transform: rotate(60deg) translateX(calc(var(--h) * -2));
    }
    nav ul li::after{
        transform: rotate(-60deg) translateX(calc(var(--h) * 2));
    }
    nav ul li:hover::before{
        filter: opacity(1);
        transform: rotate(60deg) translateX(0);
    }
    nav ul li:hover::after{
        filter: opacity(1);
        transform: rotate(-60deg) translateX(0);
    }
  • 相关阅读:
    css 修改input中placeholder提示问题颜色
    js 获取屏幕或元素宽高...
    js时间相关
    golang——gRPC学习
    golang——win10环境protobuf的使用
    golang——net/rpc/jsonrpc包学习
    golang——net/rpc包学习
    golang——log包学习
    golang——database/sql包学习
    mysql——免安装配置
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10340137.html
Copyright © 2011-2022 走看看