CSS33D导航切换代码-创新互联
随着Web技术的发展,HTML5和CSS3技术在网站建设中越发普及,除此之外,由于扁平化风格设计的风靡,CSS3技术所带来的SEO搜索引擎优化收益越来越大。以色块为主的扁平化设计风格大大减少了网站的图片数量,CSS3的使用大大减少了网站中JS的调用以及大量对DOM的操作,从根本上优化网站,从而提高用户体验。在本次教程中,让我们通过CSS3 Transform属性来实现华丽的导航菜单3D转换效果。
成都创新互联公司主要从事成都网站设计、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务云南,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108HTML代码
我们使用HTML5语义化标签section以及nav来进行布局,值得注意的是,我们将变化后的数据储存在了自定义属性data-hover中,从而充分实现我们所提倡的前端解耦。
CSS代码
[css] view plaincopyprint?
.sytm-effect a span {
position: relative;
display: inline-block;
padding: 0 14px;
background: #2195de;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
通过CSS3 Transform属性来保留3D转换,通过CSS3 Transition属性定义变化效果时间。
[css] view plaincopyprint?
.sytm-effect a span::before {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #0965a0;
content: attr(data-hover);
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
}
我们通过before这个伪类,将data-hover中的数据加入到变换的单位中,从而减少DOM的构建数量。
通过CSS3 Transform属性来定义before这个伪类的变形效果。
[css] view plaincopyprint?
.sytm-effect a:hover span,
.sytm-effect a:focus span {
-webkit-transform: rotateX(90deg) translateY(-22px);-moz-transform: rotateX(90deg) translateY(-22px);transform: rotateX(90deg) translateY(-22px);}
.sytm-effect a:hover span::before,
.sytm-effect a:focus span::before {
background: #28a2ee;
}
通过hover以及focus动作来定义对应的元素属性,从而实现华丽的变化效果,完成!
注:该效果只能在高级浏览器下实现,不支持IE8及以下版本浏览器。
另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章题目:CSS33D导航切换代码-创新互联
标题链接:http://scjbc.cn/article/coccge.html