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) ;
    }
  • 相关阅读:
    web总结
    工作总结
    python积累
    学习地图
    position:absolute绝对定位解读
    利用C++ RAII技术自动回收堆内存
    C++封装常用对象和对头文件探索
    String.split()方法你可能不知道的一面
    动态内存分配(new)和释放(delete)
    C#实现的异步Socket服务器
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10296247.html
Copyright © 2011-2022 走看看