前端是做什么的？

1.前端工程师主要利用HMTL与CSS建构页面（其中html构建骨架，css构建样式），用JavaScript获取后端数据以及完善交互以及用户体验。

2.通俗来讲，前端在一个项目里，拿到UI设计师设计的设计稿，然后实现UI设计师设计稿，调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。

3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。

4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端

程序员晋升机会差距的因素。

前端的特效视觉：

层次结构的表现

动态效果，如缩放，覆盖，滑出网页或单个视觉元素，可帮助用户理解网页信息架构。通常是通过转场和菜单来展开网页。

表现层级关系

为了展现层与层的关系，是抽屉，是打开，还是平级切换等等。让用户知道这个界面和上一个、下一个的关系。

清晰明确

动效可以清晰地表明各种数据块中间的逻辑结构，即使在数据高度饱和的情况下也能使一切从观感上有组织性。

添加了图层

在网站制作过程中加上特效，每个元素都在用户滚动页面或者是鼠标经过的地方有动态效果，就像在平面层上多出了一个动态层，这样看起来更加有层次感。

导航栏图标实现3d并分层

代码：

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
 
    <title>3D分层按钮的悬停效果</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        *{
    /* 初始化 取消内外边距 */
    margin: 0;
    padding: 0;
    /* 设置的边框和内边距的值是包含在总宽高内的 */
    box-sizing: border-box;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(200deg,#29323c,#485563);
}
.icon-box{
    /* 弹性布局 水平排列 */
    display: flex;
    flex-direction: row;
}
.icon-box a{
    color: #fff;
    margin: 0 30px;
    text-decoration: none;
    display: block;
    /* 相对定位 */
    position: relative;
}
.icon-box a .layer{
    width: 70px;
    height: 70px;
    /* 动画过渡 */
    transition: 0.3s;
}
.icon-box a .layer i{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 通过var函数调用自定义属性--c */
    border: 1px solid var(--c);
    border-radius: 6px;
    transition: 0.3s;
}
.icon-box a .layer i.fa{
    font-size: 35px;
    text-align: center;
    line-height: 70px;
    color: var(--c);
}
.icon-box a .text{
    /* 绝对定位 */
    position: absolute;
    bottom: 0;
    opacity: 0;
    width: 100%;
    text-align: center;
    color: var(--c);
    /* 动画过渡 */
    transition: 0.3s;
}
.icon-box a:hover .text{
    /* 鼠标移入文本出现 */
    bottom: -35px;
    opacity: 1;
}
.icon-box a:hover .layer{
    /* 鼠标移入，该元素旋转-35度并倾斜20度 */
    transform: rotate(-35deg) skew(20deg);
}
/* 鼠标移入，设置图标外的每一层边框的样式（不透明度+位置偏移） */
.icon-box a:hover .layer i:nth-child(1){
    opacity: 0.2;
    transform: translate(0,0);
}
.icon-box a:hover .layer i:nth-child(2){
    opacity: 0.4;
    transform: translate(5px,-5px);
}
.icon-box a:hover .layer i:nth-child(3){
    opacity: 0.6;
    transform: translate(10px,-10px);
}
.icon-box a:hover .layer i:nth-child(4){
    opacity: 0.8;
    transform: translate(15px,-15px);
}
.icon-box a:hover .layer i:nth-child(5){
    opacity: 1;
    transform: translate(20px,-20px);
}
/* 鼠标移入，设置每一层边框的阴影样式 */
.icon-box a:hover .layer i{
    box-shadow: -1px 1px 3px var(--c);
}
/* 接下来为每一个按钮设置不同颜色 */
.icon-box a:nth-child(1) .layer i,
.icon-box a:nth-child(1) .text{
    /* --c是自定义属性，这里为颜色值，可通过var函数进行调用 */
    --c: #f52112;
}
.icon-box a:nth-child(2) .layer i,
.icon-box a:nth-child(2) .text{
    --c: #2aae67;
}
.icon-box a:nth-child(3) .layer i,
.icon-box a:nth-child(3) .text{
    --c: #e79115;
}
.icon-box a:nth-child(4) .layer i,
.icon-box a:nth-child(4) .text{
    --c: #20fd20;
}
.icon-box a:nth-child(5) .layer i,
.icon-box a:nth-child(5) .text{
    --c: #c02dc5;
}
    </style>
</head>
 
<body>
    <div class="icon-box">
        <a href="#">
            <div class="layer">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i class="fa fa-qq" aria-hidden="true"></i>
            </div>
            <div class="text">QQ</div>
        </a>
        <a href="#">
            <div class="layer">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i class="fa fa-weixin" aria-hidden="true"></i>
            </div>
            <div class="text">微信</div>
        </a>
        <a href="#">
            <div class="layer">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i class="fa fa-weibo" aria-hidden="true"></i>
            </div>
            <div class="text">微博</div>
        </a>
        <a href="#">
            <div class="layer">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i class="fa fa-renren" aria-hidden="true"></i>
            </div>
            <div class="text">人人网</div>
        </a>
        <a href="#">
            <div class="layer">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i class="fa fa-twitter" aria-hidden="true"></i>
            </div>
            <div class="text">推特</div>
        </a>
    </div>
</body>
 
</html>

基于H5+css+JavaScript实现导航栏图标实现3d并分层

前端是做什么的？

前端的特效视觉：

导航栏图标实现3d并分层

代码：