记录毕业设计前后端搭建

项目部署地址：徐闫东

本篇记录上一篇登录后进入系统的一些想法与实现方案，先上UI图

 导航栏本来是想用elementUI现成的menu组件的，但是因为技术太菜没办法把导航调到右边去于是。。。。。。自己封装了一个导航栏，封装的就不放出来了，记录下导航栏随鼠标移动实现动画的效果

首页
.tItem::before {content: '';position: absolute;top: 0;left: 100%;width: 0;height: 100%;border-bottom: 2px solid #00a9fe;transition: all .3s linear;
}.tItem:hover::before {left: 0;width: 100%
}.tItem {position: relative;float: left;display: inline-block;padding: 0 10px;height: 30px;line-height: 30px;
}

记录一下作为一个后端程序员比较得意的前端页面！！！

 页面采用了多个动画效果以及对相册内的瀑布流布局，可能代码写的比较低级，但是实现效果还不错，记录下实现思路。

首先是相册处两处从不同方向通过hover实现偏移的效果，思路很简单首先将横杠和文字偏移出div框，然后将overflow设置为hidden,然后hover时偏移进div展示，设置动画时间，实现文字横线位移的效果，代码如下：

 {{item.type_name}}//名字{{item.type_dec}} //描述.title_dec{//初始设置偏移opacity: 0;transition: opacity .35s,transform .35s;transform: translate3d(100%,0,0);font-size: 15px;padding: 0.4rem 0 0;}
.empty:hover .title_dec{//偏移回去opacity: 1;transform: translate3d(0,0,0);}
.title_name:after{//标题下的横线使用伪元素position: absolute;bottom: 50%;left: 0;width: 95%;height: 2px;background: #eaeaea;content: "";transition: transform .35s;transform: translate3d(-100%,0,0);}.empty:hover .title_name:after{transform: translateZ(0);}

瀑布流布局代码：

.albumsLists{position: relative;min-height: 146px;width: 80%;column-count: 4;/*设置每一行最多四列*/column-gap: 5px;/*相当于每一个div之间的margin*/margin: auto;counter-reset: items;}.album{padding: 2px;position: relative;/*设置为相对定位*/border-radius: 4px;}.album img{display: block;/*块级元素*/width: 100%;height: auto;}/*下面是通过伪元素实现图片上的数字递增以及蒙层效果*/.album::after{position: absolute;top: 0;left: 0;width: 100%;height: 99%;display: flex;align-items: center;justify-content: center;counter-increment: items;content: counter(items);font-size: 15px;color: #cccccc;font-weight: bolder;background-color: rgba(0,0,0,0.3);transition: color 0.3s ease,background-color 0.3s ease;pointer-events:none;border-radius: 4px;}.album:hover::after{color: transparent;background-color: rgba(0,0,0,0.1);}

留言板UI

 此处实现了弹幕效果，我自己实现的一种方式，代码实现的比较low，感兴趣可以私聊~网上应该有更多实现方案，此处不过多赘述

发布文章UI

 此处采用第三方插件，具体查看mavonEditor: mavonEditor在线编辑器，此处有详细的使用说明，本系统所有图片文件使用的都是七牛云 | 简单 可信赖，在本地数据库做了外联映射主键字段

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！