这些牛逼的H5，只有定制H5才做得出！

每天都是催催催，赶赶赶，别说灵感抨击了，连产生灵感的时间都没有！那有没有可以用简单素材简单组合就能做出酷炫效果的方法？

鲁迅曾说：“本是没有路的，走的人多了，就变成了路。”

接下来看看有哪些路可走：

一、线条 + 动效 = 高科技感观

深色背景加亮色线条，制作而出的数据动态效果，是不是超级炫酷！

设计起来也是把素材反白，叠入黑色背景中，视觉重心的部分加上抽动的纯亮色线段或者圆圈来体现动感，效果真是棒棒哒！

二、霓虹色X霓虹色=艺术范

首先先找到有范并具备艺术气质的著名人物！注意一定要有“艺（zhuang）术（bi）气（dian）质（man）”的人，进行反白+放大！然后是剪切一些符合这个人物的图片，进行拼贴！怎么开心怎么来！最后再加入漂亮的闪瞎眼亮晃晃纯色块！最后就是霓虹灯动画效果啦！这种形式展示出来的效果满满的逼格上线有没有！

然而制作起来其实也不难的，剪剪剪，贴贴贴，最后用帧动画让它“动次打次”起来就好！

三、可以用交互控制的GIF

很多小伙伴都有这样的遗憾“帧动画我会做呀，可是GIF怎么做交互嘛！”然而我们仔细想想，其实帧动画说起来就是图片+图片+图片……无线下去，那是不是可以说，我把一个GIF存成图片序列进行上传，根据实际需求进行设置（播放次数、时间间隔等），是不是就能把简单的GIF改成交互效果了！

那么同理，不大的视频也可以用同样的办法哦！把各帧导出，变成图片序列，打个包，完美解决了小伙伴们的遗憾！哇塞！原来交互做起来SO EASY！程序员粑粑再也没有借口说这个效果写不出来啦！

四、独立元素动效的相互呼应

如上图，画面中的独立元素为“马里奥”，“slogan”，“背后的蘑菇”这三块，各块元素的动效都十分简单，出现——放大——消失，然后由于这些元素的动效是交替着出现的，并做了循环的效果，所以画面看起来十分的丰富，动效满满，看起来活波可爱！这就是独立元素之间的相互影响！

五、跟着漫画/插画的节奏！

这个读图的时代，什么最吸引眼球？！当然是猎奇漫画了！

漫画怎么做交互？让分格动起来！让元素跨分格！让视线跟着分格走！让对白跳动起来！人物身上的装饰也动起来！让猎奇更猎奇，让结局更意想不到！这就是十分吸引眼球的漫画式“H5”大成！

六、看不懂才最时髦！——后现代主义视觉

艺术中的艺术才最时尚！这种类型的页面属于没有你做不到只有你想不到！

当然了大部分适用于音乐类的“H5”或者受众是年轻人的项目，总之就是不要轻易尝试，毕竟不是所有人都能当艺术家！当然能做出来的话，效果还是杠杠的！