效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/KRbXGe

可交互视频教程

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/c/c3e8dCB

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,标准的导航版式:

<nav>
<ul>
<li>Home</li>
</ul>
</nav>

居中显示:

html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
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;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}

设置菜单项的文字样式:

nav ul li {
color: brown;
font-size: 20px;
font-family: sans-serif;
}

为菜单项增加鼠标划过效果:

nav ul li {
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);
transform: scale(1.05) translateY(-0.25em) perspective(300px) rotateX(20deg) ;
}

dom 中再增加几个菜单项:

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

最后,调整一下菜单项布局:

nav ul {
justify-content: space-between;
flex-direction: column;
}

大功告成!

前端每日实战:26# 视频演示如何用不到 50 行 CSS 代码,创作按钮被从纸上掀起的立体效果的更多相关文章

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

    原文地址:https://segmentfault.com/a/1190000014930183 感想:主要2D和3D转换.阴影效果. HTML代码: <nav> <ul> & ...

  2. 前端每日实战:144# 视频演示如何用 D3 和 GSAP 创作一个集体舞动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gdVObN 可交互视频 此视频是可 ...

  3. 前端每日实战:138# 视频演示如何用纯 CSS 创作一张 iPhone 价格信息图

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OorLGZ 可交互视频 此视频是可 ...

  4. 前端每日实战:98# 视频演示如何用纯 CSS 创作一只愤怒小鸟中的绿猪

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VBGWqX 可交互视频 此视频是可 ...

  5. 前端每日实战:149# 视频演示如何用纯 CSS 创作一个宝路薄荷糖的动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oagrvz 可交互视频 此视频是可 ...

  6. 前端每日实战:131# 视频演示如何用纯 CSS 创作一把剪刀

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GXyGpZ 可交互视频 此视频是可 ...

  7. 前端每日实战:35# 视频演示如何把 CSS 径向渐变用得出神入化,只用一个 DOM 元素就能画出国宝熊猫

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odKrpy 可交互视频教程 此视频 ...

  8. 前端每日实战:56# 视频演示如何用纯 CSS 描述程序员的生活

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YvYVvY 可交互视频 此视频是可 ...

  9. 前端每日实战:92# 视频演示如何用纯 CSS 创作一颗逼真的土星

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/EpbaQX 可交互视频 此视频是可 ...

随机推荐

  1. 吴裕雄--天生自然python学习笔记:python 用pygame模块处理音频文件

    除了对图片. Word 等普通格式的文件进行处理外, Python 还有强大的多媒体文件操作能力,如对音频.视频 文件的操作 . 如果要播放音乐,我们可以用 pygame 包中的 mixer 对 象. ...

  2. 【学习笔记】 Johnson 全源最短路

    前置扯淡 一年多前学的最短路,当时就会了几个名词的拼写,啥也没想过 几个月之前,听说了"全源最短路"这个东西,当时也没说学一下,现在补一下(感觉实在是没啥用) 介绍 由于\(spf ...

  3. Java操作redis客户端Jedis使用

    1.1   jedis介绍 Redis不仅是使用命令来操作,现在基本上主流的语言都有客户端支持,比如java.C.C#.C++.php.Node.js.Go等. 在官方网站里列一些Java的客户端,有 ...

  4. Ubuntu 12.04 搭建TFTP服务器

    吐槽先:在Ubuntu上搭建TFTP服务器,网上搜到一堆资料,可惜基本都是部分能用,至于哪些部分能用还要自己摸索着试出来,郁闷之情仅次于找不到任何资料…… ---------------------- ...

  5. 奇点云数据中台技术汇(三)| DataSimba系列之计算引擎篇

    随着移动互联网.云计算.物联网和大数据技术的广泛应用,现代社会已经迈入全新的大数据时代.数据的爆炸式增长以及价值的扩大化,将对企业未来的发展产生深远的影响,数据将成为企业的核心资产.如何处理大数据,挖 ...

  6. crm项目-stark组件

    ###############  admin基本认识和常用的定制功能    ############### stark组件 对admin的基本认识 1,就是一个app,嵌入到了django里面,你可以 ...

  7. python-django-fastdfs+Nginx的安装和配置_20191122

    python-django-fastdfs+Nginx的安装和配置 FastDFS文件系统 FastDFS文件系统简介: 是c语言编写的,是淘宝的架构师写的,存储淘宝的图片,后来开源了, fastDF ...

  8. 求求你,下次面试别再问我什么是 Spring AOP 和代理了!

    https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_9403056301388627935% ...

  9. mysql挖掘与探索------第2章 索引1-2 全文索引FULLTEXT

    A 显示表的所有索引: show INDEX from phphi_article; B删除索引:alter table phphi_article drop INDEX fullwords; C添加 ...

  10. python--防止SQL注入

    from pymysql import * def main(): # 创建Connextion连接 conn = connect(host='localhost', port=3306, user= ...