码迷,mamicode.com
首页 > Web开发 > 详细

26.纯 CSS创作按钮被从纸上掀起的立体效果

时间:2019-01-20 22:05:11      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:die   阴影   height   地址   bsp   ace   ade   位置   nbsp   

原文地址: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);
    /* 2D\3D转换 */
    /* 大小  Y轴上位置  为3D转换元素定义透视视图,为尺寸增加视图效果 翻开角度*/
    transform: scale(1.05) translateY(-0.25em) perspective(300px) rotateX(20deg) ;
}

 

26.纯 CSS创作按钮被从纸上掀起的立体效果

标签:die   阴影   height   地址   bsp   ace   ade   位置   nbsp   

原文地址:https://www.cnblogs.com/FlyingLiao/p/10296247.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!