随着Web技术的发展,HTML5和CSS3技术在网站建设中越发普及,除此之外,由于扁平化风格设计的风靡,CSS3技术所带来的SEO搜索引擎优化收益越来越大。
使用 CSS3 Transform 实现菜单3D效果
HTML代码
我们使用HTML5语义化标签section以及nav来进行布局,值得注意的是,我们将变化后的数据储存在了自定义属性data-hover中,从而充分实现我们所提倡的前端解耦。
CSS代码
通过CSS3 Transform属性来保留3D转换,通过CSS3 Transition属性定义变化效果时间。
我们通过before这个伪类,将data-hover中的数据加入到变换的单位中,从而减少DOM的构建数量。
通过CSS3 Transform属性来定义before这个伪类的变形效果。
通过hover以及focus动作来定义对应的元素属性,从而实现华丽的变化效果,完成!
注:该效果只能在高级浏览器下实现,不支持IE8及以下版本浏览器。
发表回复