简介项目特色项目预览卫星的实现方式首次进入卫星效果的实现方式卫星跟随鼠标滑动的随机效果实现方式环境准备项目启动项目部署项目地址

financialmanagement

登录页面的为动态效果在刚刷新或者刚进入的时候有个卫星环绕的动画效果鼠标移动或者悬浮都有不同的动态效果。

首页首次进入效果

主要是用到了渐变背景和阴影。

在background中使用radial-gradient控制不同的卫星的样式效果。

再用box-shadow来展示卫星的发光效果。

background:

ball1-example-37dfd6fc;animation-duration:

css3的动画效果用transform的rotate控制小球的运行轨迹。

keyframes

使用mousewheel.prevent方法在mousePoll中配置滚轮滑动的效果。

和deltaX

由于mousewheel.prevent是不断的返回数据使用加了一个节流2秒获取一次数据以防出现问题。

滚轮滑动mousePoll(e)

document.getElementsByClassName(ball1)[0];let

ball2

document.getElementsByClassName(ball2)[0];let

ball3

document.getElementsByClassName(ball3)[0];//

节流if

scale(${this.ballScale});ball2.style.transform

scale(${this.ballScale});ball3.style.transform

(directionX

{document.getElementsByClassName(main-second)[0].scrollIntoView();this.slideDown

0;}

2000);};betterFn();},如果想要知道具体的实现思路可以到项目中查看项目地址》》

环境准备

https://gitee.com/naitang_room/Personal-Financial-Management-System.git#

安装依赖

https://gitcode.com/wantRich/vue2_element_axios_PersonalFinancialManagementSystem.git

欢迎访问项目

欢迎关注我获取前端学习资源日常分享技术变革生存法则行业内幕洞察先机。