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

posted on 2019-01-20 21:23 人生与戏阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/FlyingLiao/p/10296247.html

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

4. 纯 CSS 创作一个金属光泽 3D 按钮特效
4. 纯 CSS 创作一个金属光泽 3D 按钮特效原文地址:https://segmentfault.com/a/1190000014599280 HTML代码: <div class=&qu ...
如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
css动态彩虹背景,59.纯 CSS 创作彩虹背景文字
感想: 又一次见识到CSS的强大之处,当然MDN文档也是666: HTML code: thanks CSS code: html, body { margin:; padding:; } /* 设置 ...
html清除div虚线,纯CSS去除按钮以及链接点击时虚线
深藏多年秘笈大公开,全世界唯一一家公布,怎么点就是点不出,纯CSS去掉按钮或者链接点击产生的虚线. 运行代码框 .wrap{position:relative;} .btns{zoom:1;} .bt ...
79.纯 CSS 创作单元素麦当劳金拱门 Logo（自创）
79.纯 CSS 创作单元素麦当劳金拱门 Logo(自创) 效果地址:https://scrimba.com/c/cN3P6nfr 原理:两个椭圆,颜色部分为边框,下一半被伪元素覆盖. 感想:看了一眼 ...
22.纯 CSS 创作出美丽的彩虹条纹文字
22.纯 CSS 创作出美丽的彩虹条纹文字原文地址:https://segmentfault.com/a/1190000014858628 感想: 利用四个span的::before 和 ::aft ...
79.纯 CSS 创作单元素麦当劳金拱门 Logo（原文）
79.纯 CSS 创作单元素麦当劳金拱门 Logo(原文) 1. 效果图: 效果地址:https://codepen.io/flyingliao/pen/JgavjX 原理:m是伪元素::before ...
39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效
39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效原文地址:https://segmentfault.com/a/1190000015126240 HTML code: <div cl ...
73.纯 CSS 创作一只卡通狐狸
73.纯 CSS 创作一只卡通狐狸原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6E ...

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

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

最新文章

热门文章