【Java程序猿】徒手暴撸CSS 3D导航按钮效果

2020-04-16 · 树下魅狐 · · 本文共815个字,预计阅读需要4分钟。

今天给大家分下一个使用CSS3徒手写3D效果的教程。我在开发尤娜博客系统的时候,为了制作博客主题,开始学习了前端的一些编程知识,并非专业的前端开发人员,因此,有何不妥之处,望见谅!

工具和资源

我个人在编写后端代码是,习惯于使用IntelliJ IDEA,因此前端的代码编辑工具也使用Jetbrains家族的WebStorm编辑器。你也可以选择自己喜欢的编辑器(编辑器没有什么特殊要求)。

教程中使用的外部资源是Font Awesome。Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

Font Awesome图标

在本案例中,使用了五个Font Awesome图标,他们是:

名称 CSS类 图片
微信图标 fa fa-wechat
QQ图标 fa fa-qq
微博图标 fa fa-weibo
人人图标 fa fa-renren
Google图标 fa fa-google

Color设置

教程中为每个图标定义了不同的背景颜色,具体如下:

Html结构

教程中的HTML结构很简单,使用了一个ul元素,并在其中定义了5个li元素。结构如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>CSS 3D Navigation Bar</title>
</head>
<body>
    <ul>
        <li>
            <a href="#">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span class="fa fa-wechat"></span>
            </a>
        </li>
        //省略剩余四个li元素
    </ul>
</body>
</html>

Style样式

在本例中,使用的布局为flex布局,另外还用到了几个核心的CSS属性:

  • transform-style: preserver-3d: 该属性设置在父级元素中,让子元素具有3D效果;
  • transform: rotate() : 定义 2D 旋转,在参数中规定角度。
  • transform: skew() : 定义沿着 X 和 Y 轴的 2D 倾斜转换。
  • transform-origin: top : 定义视图被置于X轴/Y轴/Z轴的位置。

最终效果:


代码完成后,当鼠标滑过图标时,图标会向上升起,同时会分成5个不同透明度的渐变层。效果如下:

如果你对该教程感兴趣,可以点击下方链接,在线观看本文的视频教程: