要设置守望先锋主页动画,可以按照以下步骤操作:
第一个动态效果
雪花及英雄移动效果:
使用GIF作为雪花背景。
将英雄图片铺在上方,背景色设置为透明,使用Photoshop进行处理。
使用jQuery实现鼠标选中英雄图片移动的效果,通过获取鼠标滑动的x、y轴来写动画,并设置margin来移动图片。
第二个动态效果
鼠标滑到英雄头像显示立绘:
将所有英雄头像和立绘放在首页中。
默认展示一个英雄(例如黑影),其他英雄的立绘设置为`display:none`。
当鼠标滑动到其他英雄头像时,将之前展示的英雄立绘设置为`display:none`,并将选中的英雄头像对应的立绘设置为`display:block`,并使用margin移动到显示位置。