前端是做什么的？
1.前端工程师主要利用HMTL与CSS建构页面（其中html构建骨架，css构建样式），用JavaScript获取后端数据以及完善交互以及用户体验。
2.通俗来讲，前端在一个项目里，拿到UI设计师设计的设计稿，然后实现UI设计师设计稿，调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。
3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。
4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端
程序员晋升机会差距的因素。
前端的特效视觉：
层次结构的表现
动态效果，如缩放，覆盖，滑出网页或单个视觉元素，可帮助用户理解网页信息架构。通常是通过转场和菜单来展开网页。
表现层级关系
为了展现层与层的关系，是抽屉，是打开，还是平级切换等等。让用户知道这个界面和上一个、下一个的关系。
清晰明确
动效可以清晰地表明各种数据块中间的逻辑结构，即使在数据高度饱和的情况下也能使一切从观感上有组织性。
添加了图层
在网站制作过程中加上特效，每个元素都在用户滚动页面或者是鼠标经过的地方有动态效果，就像在平面层上多出了一个动态层，这样看起来更加有层次感。
代码：
<html><head><metahttp-equiv="content-type"content="text/html; charset=utf-8"><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>鼠标悬停时毛玻璃导航栏光闪效果</title><style> *{ /* 初始化 取消页面元素的内外边距 */margin: 0; padding: 0; /* 这个是告诉浏览器：你想要设置的边框和内边距的值是包含在总宽高内的 */box-sizing: border-box; } body{ /* 弹性布局 水平、垂直居中 */display: flex; justify-content: center; align-items: center; /* 100%窗口高度 */height: 100vh; /* 相对定位 */position: relative; /* 渐变背景 */background: linear-gradient(200deg,#5e2b76,#415703); } .container{ /* 弹性布局 */display: flex; /* 允许换行 */flex-wrap: wrap; /* 将元素靠边对齐 */justify-content: space-around; } .container.btn{ position: relative; width: 200px; height: 60px; margin: 30px; } .container.btna{ /* 绝对定位 */position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; /* 透明度为0.05的白色背景 */background: rgba(255,255,255,0.05); /* 阴影 */box-shadow: 015px35pxrgba(0,0,0,0.2); /* 上下边框 */border-top: 1pxsolidrgba(255,255,255,0.1); border-bottom: 1pxsolidrgba(255,255,255,0.1); /* 圆角 */border-radius: 30px; color: #fff; z-index: 1; font-weight: 400; /* 字间距 */letter-spacing: 1px; /* 去下划线 */text-decoration: none; /* 动画过渡 */transition: 0.5s; /* 溢出隐藏 */overflow: hidden; /* 背景模糊 */backdrop-filter: blur(15px); } .container.btn:hovera{ letter-spacing: 5px; } /* 制作扫光效果 */.container.btna::before{ content: ""; /* 绝对定位 */position: absolute; top: 0; left: 0; width: 50%; height: 100%; /* 渐变背景 透明到白色 */background: linear-gradient(toright,transparent,rgba(255,255,255,0.15)); /* 沿X轴倾斜45度，向右平移0像素 */transform: skewX(45deg) translateX(0); transition: 0.5s; } .container.btn:hovera::before{ /* 沿X轴倾斜45度，向右平移200% */transform: skewX(45deg) translateX(200%); } /* 制作按钮上下两个发光层 */.container.btn::before, .container.btn::after{ content: ""; /* 绝对定位，横向居中 */position: absolute; left: 50%; transform: translateX(-50%); width: 40px; height: 10px; /* 自定义颜色属性--c, 可通过var函数调用 *//* --c: gold; */background: var(--c); border-radius: 5px; box-shadow: 005pxvar(--c), 0015pxvar(--c), 0030pxvar(--c), 0060pxvar(--c) ; transition: 0.5s; } .container.btn::before{ bottom: -5px; } .container.btn::after{ top: -5px; } .container.btn:hover::before, .container.btn:hover::after{ height: 50%; width: 80%; border-radius: 15px; transition-delay: 0.3s; } .container.btn:hover::before{ bottom: 0; } .container.btn:hover::after{ top: 0; } /* 分别设置自定义颜色属性--c */.container.btn:nth-child(1)::before, .container.btn:nth-child(1)::after{ --c: #dbe912; } .container.btn:nth-child(2)::before, .container.btn:nth-child(2)::after{ --c: #aa00ff; } .container.btn:nth-child(3)::before, .container.btn:nth-child(3)::after{ --c: #33ff00; } </style></head><body><divclass="container"><divclass="btn"><ahref="#">点赞</a></div><divclass="btn"><ahref="#">关注</a></div><divclass="btn"><ahref="#">评论</a></div></div></body></html>
