网站新闻发布系统模板,网站展示型推广有哪些,做网站通常到哪找图片,如何搭建购物网站一、背景 最近在其他的网页中看到了一个很有趣的3d效果#xff0c;这个效果就是使用css3中的3D转换实现的#xff0c;所以今天的内容就是3D的导航栏效果。那么话不多说#xff0c;直接开始主要内容的讲解。
二、效果展示 三、思路解析 1、首先我们需要将这个导航使用一个大…一、背景 最近在其他的网页中看到了一个很有趣的3d效果这个效果就是使用css3中的3D转换实现的所以今天的内容就是3D的导航栏效果。那么话不多说直接开始主要内容的讲解。
二、效果展示 三、思路解析 1、首先我们需要将这个导航使用一个大的盒子包裹方便管理整体 2、每一块的效果都是独立的所以需要单独设置其效果 3、这个效果是当鼠标悬浮的时候会向上翻动鼠标离开自动弹回 基本的思路已经介绍完了那么接下来就开始代码的实现和解析。
四、 代码总览
1、html部分
div classboxul classbox_navlidiv classnav_frontHome/divdiv classnav_topHome/div/lilidiv classnav_frontServices/divdiv classnav_topServices/div/lilidiv classnav_frontProducts/divdiv classnav_topProducts/div/lilidiv classnav_frontBlog/divdiv classnav_topBlog/div/lilidiv classnav_frontContact/divdiv classnav_topContact/div/lilidiv classnav_frontAbout Us/divdiv classnav_topAbout Us/div/li/ul/div 首先我们就来介绍一下我的实现思路先从结构说起通过上边的效果展示不难看出这里一定是有两个面的或者说是至少需要两个面才可以实现这个效果在这里我选择了使用无序列表来充当最外层的大盒子来实现3d的效果然后每个li就是一个独立的个体在li中包裹了两个div来实现两个平面这样基本的结构元素就齐全了。 那么接下来我们就需要想一下如何实现翻转的效果第一步就需要将这两个盒子重叠起来然后通过3d属性来设置他们的位置目前先抛开动态效果不说我们想来实现一下解下来就来看一下css部分 2、CSS部分
html,body{margin: 0;padding: 0;
}
.box{width: 100%;height: 100vh;background-color: #ccc;display: flex;
}
.box_nav{margin: auto;list-style: none;width: 770px;height: 35px;display: flex;}
.box_navli{cursor: pointer;width: 120px;height: 35px;line-height: 35px;margin: 0px 5px;text-align: center;transition: all .5s;position: relative;transform-style: preserve-3d;}
.nav_front{width: 120px;height: 35px;background-color: rgb(48, 172, 164);transform: translateZ(17.5px);font-size: 14px;
}
.nav_top{width: 120px;height: 35px;background: linear-gradient(to top , #256b65,#38b0a8);position: absolute;top: 0px;left: 0px;transform: translateY(17.5px) rotateX(-90deg);font-size: 14px;
}
.box_navli:hover{transform: rotateX(90deg);
}首先我们先来处理一下之后可能会影响我们布局的内外边距处理之后我们就来实现这里我们使用到了flex布局将li横向排列实现基本的布局然后我们需要将nav_front和nav_top设置固定的合适的宽高注意这里不必和我设置的一样我只实现基本的效果 至于将两个面重叠起来我们就需要使用到定位属性来将两个面实现分层处理这个时候我们就可以轻松的发现我们只需要将在下面的那个盒子旋转为与我们桌子平行的样子就就可以了注意这里需要使用translateY来移动那个面移动到下边来充当悬浮后翻起的那个面这样就可以实现基本的布局。那么说到这里我们现在就差动态的效果了。 动态效果就全靠这条属性的定义了
.box_navli:hover{transform: rotateX(90deg);
} 语义就是以x轴作为旋转轴将整个li进行旋转90度这样就可以实现效果了当然只设置这个就会很僵硬所以我们呢需要配合过渡属性来缓和效果这样就实现了基础了3d导航栏的效果。
五、结语 今天的分享就到这里了如果您觉得这篇文章还不错请点赞、分享给更多的朋友吧同时也欢迎关注我的博客获取更多精彩内容。 本人刚刚组件了社区大家社区中后续会持续更新一些其他的内容大家可以加入一下。 https://bbs.csdn.net/forums/fe46c651de82465696aeabef266b0476?joinKeyxndsi3pgxkw2-wn5z0y463k-1-446fd82212de589eead88d47f7b7dabbhttps://bbs.csdn.net/forums/fe46c651de82465696aeabef266b0476?joinKeyxndsi3pgxkw2-wn5z0y463k-1-446fd82212de589eead88d47f7b7dabb
