时间:2023-01-29 浏览量: 收藏
效果如下图:
HTML代码
导航菜单的链接,在这里我们添加了一些额外的span元素来帮助实现3D效果:
<ul class="menu"> <li> <a href="#" class="three-d ">网站首页 <span class="three-d-box"> <span class="front">网站首页</span> <span class="back">home</span> </span> </a> </li> <li> <a href="#" class="three-d ">关于我们 <span class="three-d-box "> <span class="front">关于我们</span> <span class="back">about us</span> </span> </a> </li> <li> <a href="#" class="three-d ">产品中心 <span class="three-d-box "> <span class="front">产品中心</span> <span class="back">product</span> </span> </a> </li> </ul>
在a链接标记旁边是一系列的span元素,动画演示过程中,它将用来表现3D立方体的“正面”和“背面”。这些span里的文字和a链接里的文字是一致的。
CSS代码
这个动画的过程就是实现3D变换和元素位置变化。但实际上A链接是没有移动的,动的是span标签,而且是最外层的span标签,内部的span标签被初始化在它的位置上,以后就不做任何变动。每个元素都可以向上翻,并要翻回来,我们使用的是css transforms。
.menu { display: flex; background: #09F; } .menu li { display: inline-block; width:10%; } .menu li a { color: #fff; display: block; text-decoration: none; font-family: 'Microsoft Yahei', Arial, sans-serif; text-transform: uppercase; text-align: center; line-height: 20px; font-size: 20px; padding: 15px 10px; } .three-d { perspective: 200px; transition: all .07s linear; position: relative; cursor: pointer; } .three-d:hover .three-d-box, .three-d:focus .three-d-box { transform: translateZ(-25px) rotateX(90deg); } .three-d-box { transition: all .3s ease-out; transform: translatez(-25px); transform-style: preserve-3d; pointer-events: none; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; } .front { transform: rotatex(0deg) translatez(25px); } .back { transform: rotatex(-90deg) translatez(25px); } .front, .back { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #09F; padding: 15px 10px; color: #FFF; pointer-events: none; box-sizing: border-box; }
RELATED RECOMMEND
2023-01-29
企业网站导航设计是网站中一个很重要的因素,一个合理的导航设计不但利于搜索引擎优化,还对提升用户体验至关重要,迅速了解自己所处的位置,这对提高用户的转化率十分有用。在网站建设中做好各类导航设计对网站后期的优化推广十分有利。 下面我们就来看看在网站设计制作中,做好导航设计的相关几点。 1、辅助导航。 为用户提供一个直观的展示,让用户知道自己所在的网站位置,这样可以让每一级的位置名称的有链接可会,每一个网页都必须包含辅助导航以及左上角的网站的logo标识。 2、网站logo链接。 在网站设置中,在每一个出现网...
2023-01-29
企业如何选择网络公司建站的常见问题,世敏网络总结以下几点:1、企业会以自己建站的要求,比如需要哪些功能板块,界面的风格等直接来衡量各网络公司报的费用,很多具体细节的东西企业并不知道,这样一些网络公司可能就会以最简单的方式来做,这样省时、省力,因为很多
2023-01-29
厦门网站建设包括网站策划、网页设计、网站功能、网站优化技术、网站内容整理、网站推广、网站评估、网站运营、网站整体优化、网站改版等。网站建设的前期准备包括了前期网站定位、内容差异化、页面沟通等战略性调研,这个过程需要网站策划人员、美工设计人员、PHP程
Copyright © 2012-2024 世敏网络 版权所有 闽ICP备18026760号-1 闽公网安备 35020502000640号 网站地图 Sitemap 关键词聚合