zoukankan      html  css  js  c++  java
  • 26.纯 CSS创作按钮被从纸上掀起的立体效果

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

    感想:主要2D和3D转换、阴影效果。

    HTML代码:

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

    CSS代码:

    html, body ,ul{
        margin: 0;
        padding: 0;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    html, body {
        background: linear-gradient(cadetblue, darkcyan);
    }
    /* 设置容器的样式,把背景色声明为变量 */
    nav {
        width: 300px;
        height: 300px;
        --bgcolor: lemonchiffon;
        background-color: var(--bgcolor);
        box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        padding: 30px 0;
        box-sizing: border-box;
    }
    nav ul{
        list-style-type: none;
        justify-content: space-between;
        flex-direction: column;
    }
    nav ul li {
        color: brown;
        font-size: 20px;
        font-family: sans-serif;
        padding: 0.5em 1em;
        border-radius: 0.5em;
        transition: 0.5s ease-out;
    }
    nav ul li:hover {
        /* 阴影 */
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1),
                    0 6px 6px rgba(0, 0, 0, 0.1),
                    0 8px 8px rgba(0, 0, 0, 0.1),
                    0 12px 12px rgba(0, 0, 0, 0.1);
        /* 2D3D转换 */
        /* 大小  Y轴上位置  为3D转换元素定义透视视图,为尺寸增加视图效果 翻开角度*/
        transform: scale(1.05) translateY(-0.25em) perspective(300px) rotateX(20deg) ;
    }
  • 相关阅读:
    A Plug for UNIX (最大流 邻接矩阵dinic)POJ
    Dining POJ
    ACM Computer Factory (邻接矩阵 dinic 模板)(最大流+路径输出)POJ
    HDU
    E
    2018 东北赛i 简单dpI
    Coloring Brackets CodeForces
    2019浙江省赛j welcome Party
    D
    Critical Links (UVA
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10296247.html
Copyright © 2011-2022 走看看