原文地址: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:;
padding:;
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创作按钮被从纸上掀起的立体效果的更多相关文章

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

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

  2. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  3. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  4. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  5. 纯CSS完成tab实现5种不同切换对应内容效果

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  6. 如何用纯 CSS 创作一个容器厚条纹边框特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/YLqbXy 可交互视频教程 此视 ...

  7. 如何用纯 CSS 创作一副国际象棋

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

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

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

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

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

随机推荐

  1. java线程调度原则

    线程的调度采用占先原则,优先级越高的线程越优先执行.每个JAVA线程优先级有设置在常数1-10的范围,默认值是5.但优先级高并不代表能独自占用执行时间片,而是优先级越高得到越多的执行时间片,反之,优先 ...

  2. Ubuntu 14.10 下安装伪分布式hbase 0.99.0

    HBase 安装分为:单击模式,伪分布式,完全分布式,在单机模式中,HBase使用本地文件系统而不是HDFS ,所有的服务和zooKeeper都运作在一个JVM中.本文是安装的伪分布式. 安装步骤如下 ...

  3. 力奋github:https://github.com/birdstudiocn

    我的github地址https://github.com/birdstudiocn

  4. Web jsp开发学习——点击菜单页面切换

      两个网页使用同一个head,在点击“首页”后,head的“首页”变成绿色,点击“新闻”后,head的“新闻”变成绿色,head的“首页”恢复原来的颜色   head.jsp <%@ page ...

  5. 学习笔记之Data analysis

    Data analysis - Wikipedia https://en.wikipedia.org/wiki/Data_analysis Data analysis is a process of ...

  6. Eclipse代码提示补全问题,自动选择第一个

    原地址 http://blog.csdn.net/liuhhaiffeng/article/details/7179243 Eclipse具有代码提示功能, 但是默认的提示只有在输入".&q ...

  7. text clf rnn

    #!/usr/bin/env python # coding=utf- import numpy as np import pandas as pd import re from bs4 import ...

  8. logstash报错401 需要在logstash启动的配置文件中增加es的用户名和密码

  9. 主机、Docker时间与时区设置总结

    最近在使用Docker容器时,部署java程序发现时间输出不对,在修改问题时总结如下. #date [-R] #查看主机时间 #timedatectl       #查看主机时区 #tzselect ...

  10. mdm9607 gpio12~17改成普通gpio的方法

    qualcomm mdm9607的gpio12~gpio17定义如下: 现在如果想要设置GPIO_12~GPIO_17为普通GPIO口. 需要修改如下: 顺便附上qualcomm的说明: Remove ...