11个html5+css3全屏遮罩导航菜单

作者 : 小刺猬 本文共645个字,预计阅读时间需要2分钟 发布时间: 2020-07-29 共105人阅读

11个html5+css3全屏遮罩导航菜单

这是一款使用html5 svg和css3制作的全屏遮罩导航菜单,这些遮罩层没有固定的大小但是它们全屏覆盖整个屏幕,可以说大小是以你的浏览器为准。默认是绿色背景,你完全可以换成其它颜色,这个不用我细说了吧。分别是:Huge Inc, Corner, Slide down, Scale, Door, Content Push,Content Scale, Corner Shape, Little Boxes, Simple Genie, Genie

这是一款使用html5 svg和css3制作的全屏遮罩导航菜单,这些遮罩层没有固定的大小但是它们全屏覆盖整个屏幕,可以说大小是以你的浏览器为准。默认是绿色背景,你完全可以换成其它颜色,这个不用我细说了吧。

请在现代浏览器中查看这些demo。

11个效果名称分别是:

Huge Inc, Corner, Slide down, Scale, Door, Content Push,Content Scale, Corner Shape, Little Boxes, Simple Genie, Genie
英文看不懂请看演示。

第一个demo的灵感来自于Huge。这个效果使遮罩层淡入淡出,并使里面的内容带有一些3d旋转效果,

这里使用一些视觉差小把戏使遮罩层消失:我们为可见元素设置transition delay使透明度首先开始改变。

其他一些demo中我们使用了Snap.svg来制作SVG路径变形动画。

VIP免费 永久VIP免费

已有0人支付


刺猬源码 » 11个html5+css3全屏遮罩导航菜单

刺猬QQ交流群号多少?
363432
刺猬官方有技术支持吗?
有的,但技术支持是有偿服务哦,咨询右下角的在线客服吧!
下载的资源不能使用怎么办?
如果在本站下载的资源不能使用,一经确认可以联系在线客服退款。

发表评论

刺猬源码网,累计帮助1000+用户成功建站,为草根创业提供助力!

立即查看 了解详情