CSS33D导航切换代码-创新互联

随着Web技术的发展，HTML5和CSS3技术在网站建设中越发普及，除此之外，由于扁平化风格设计的风靡，CSS3技术所带来的SEO搜索引擎优化收益越来越大。以色块为主的扁平化设计风格大大减少了网站的图片数量，CSS3的使用大大减少了网站中JS的调用以及大量对DOM的操作，从根本上优化网站，从而提高用户体验。在本次教程中，让我们通过CSS3 Transform属性来实现华丽的导航菜单3D转换效果。

成都创新互联公司主要从事成都网站设计、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务云南,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

HTML代码

<section class="bg-color">

<nav class="sytm-effect">

<a href="http://www.sytm.net/"><span data-hover="sytm">添美科技</span></a>

<a href="http://www.sytm.net/wangzhanjianshe/"><span data-hover="Develop">网站建设</span></a>

<a href="http://www.sytm.net/jiejuefangan/"><span data-hover="Design">网上商城</span></a>

<a href="http://www.sytm.net/mobile/"><span data-hover="Mobile">移动应用</span></a>

<a href="http://www.sytm.net/ruanjiankaifa/"><span data-hover="sytmsoft">软件开发</span></a>

</nav>

</section>

我们使用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导航切换代码-创新互联
本文网址：https://www.cdcxhl.com/article14/coccge.html

成都网站建设公司_创新互联，为您提供关键词优化、定制开发、微信小程序、App设计、商城网站、网站设计公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联