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);
    }
  • 相关阅读:
    Redis安装
    mysql 存储过程与存储函数
    mysql 常用函数
    cpu-z笔记本加条子
    centos上网络服务起不来network.service failed
    centos/redhat命令行上传下载文件
    docker删除已经停止的容器
    centos/redhat/ubuntu不同之处
    部署lamp动态网站(图解)
    写交互式脚本时,遇到到报错:not a regular file
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10340137.html
Copyright © 2011-2022 走看看