亿万先生先
科技动态中心
现学现卖做一个炫酷的动态背景页面

  weixin_37636605:我开始使用了npm install的方法,老是出错,成功不了,使用了这个方法直接成功,看来方法很重要。感谢博主

  很喜欢酷炫的页面,自从看了抖音的主页之后(如下)(链接),就决定要也做一个牛逼的动态背景页面

  这里为了设计简便,用了bootstrap和jquery(其实对这两个框架都不熟,现学现卖呗)(记得要引入bootstrap和jquery),代码如下:

  来解释一下,首先做一个有声音,动态的背景,其实就是引入一个video文件,autoplay用来设置打开网页就自动播放,loop指定视频无线循环~,其中最终要是要把视频的样式设置为背景,用css来设置video标签内的样式:

  这里将video设置为背景,用到z-index属性,z-index就是设置堆叠顺序,将z-index属性设置为-9999也就是将视频放置在堆叠的最下层,z-index的相关资料链接:菜鸟教程

  接下来,我们用jquery做一个小小的试验,这里用jquery做了一个栏按钮的效果,鼠标移到按钮处就会出现变化,如下图:

  项目教程   今天~为你推荐10个靠谱的开源免费网页动效库,帮你的前端工程加速~正文共:2248 字 预计阅读时间:6 分钟动效设计是2018年的热门趋势之一。如果你仔细找找的话,会发现许多有趣的用来构建UI动效的工具,而这些素材和工具正在成为越来越多设计项目中不可或缺的催化剂。今天~小编为你推荐10个靠谱的开源免费网页动效库,帮你的设计加速~^_^1. GSAPGSA...

亿万先生先,亿万先生先官网,亿万先生先平台