基于H5+css+JavaScript实现旋转式导航栏

简介: 基于H5+css+JavaScript实现旋转式导航栏

前端是做什么的?

1.前端工程师主要利用HMTL与CSS建构页面(其中html构建骨架,css构建样式),用JavaScript获取后端数据以及完善交互以及用户体验。

2.通俗来讲,前端在一个项目里,拿到UI设计师设计的设计稿,然后实现UI设计师设计稿,调用后端程序员给的数据接口以获取数据,然后测试,最后部署上线。

3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。

4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。

前端的特效视觉:


层次结构的表现

动态效果,如缩放,覆盖,滑出网页或单个视觉元素,可帮助用户理解网页信息架构。通常是通过转场和菜单来展开网页。

表现层级关系

为了展现层与层的关系,是抽屉,是打开,还是平级切换等等。让用户知道这个界面和上一个、下一个的关系。

清晰明确

动效可以清晰地表明各种数据块中间的逻辑结构,即使在数据高度饱和的情况下也能使一切从观感上有组织性。

添加了图层

在网站制作过程中加上特效,每个元素都在用户滚动页面或者是鼠标经过的地方有动态效果,就像在平面层上多出了一个动态层,这样看起来更加有层次感。

旋转式导航栏

image.png

image.png


代码:

<!DOCTYPE html><html><head><metahttp-equiv="content-type"content="text/html; charset=utf-8"><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>旋转菜单</title><linkhref="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"><!-- 图标来源 --><style>        *{
margin: 0;
padding: 0;
}
body{
background: linear-gradient(toright, #00cbfd, #7bff00);
height: 100vh;
}
.menu-toggler{
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 40px;
height: 40px;
z-index: 2;
opacity: 0;
cursor: pointer;
}
.menu-toggler:hover + label,
.menu-toggler:hover + label::before,
.menu-toggler:hover + label::after{
background: rgb(255, 0, 191);
}
.menu-toggler:checked + label{
background: transparent;
}
.menu-toggler:checked + label::before,
.menu-toggler:checked + label::after{
top: 0;
width: 40px;
transform-origin: 50%50%;
}
.menu-toggler:checked + label::before{
transform: rotate(45deg);
}
.menu-toggler:checked + label::after{
transform: rotate(-45deg);
}
.menu-toggler:checked ~ ul.menu-item{
opacity: 1;
}
.menu-toggler:checked ~ ul.menu-item:nth-child(1){
transform: rotate(0deg) translateX(-110px);
}
.menu-toggler:checked ~ ul.menu-item:nth-child(2){
transform: rotate(60deg) translateX(-110px);
}
.menu-toggler:checked ~ ul.menu-item:nth-child(3){
transform: rotate(120deg) translateX(-110px);
}
.menu-toggler:checked ~ ul.menu-item:nth-child(4){
transform: rotate(180deg) translateX(-110px);
}
.menu-toggler:checked ~ ul.menu-item:nth-child(5){
transform: rotate(240deg) translateX(-110px);
}
.menu-toggler:checked ~ ul.menu-item:nth-child(6){
transform: rotate(300deg) translateX(-110px);
}
.menu-toggler:checked ~ ul.menu-itema{
pointer-events: auto;
}
.menu-toggler + label{
width: 40px;
height: 5px;
display: block;
z-index: 1;
border-radius: 2.5px;
background: rgba(61, 21, 240, 0.7);
transition: transform0.5s, top0.5s;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.menu-toggler + label::before,
.menu-toggler + label::after{
width: 40px;
height: 5px;
display: block;
z-index: 1;
border-radius: 2.5px;
background: rgba(248, 91, 91, 0.7);
transition: transform0.5s, top0.5s;
content: "";
position: absolute;
left: 0;
}
.menu-toggler + label::before{
top: 10px;
}
.menu-toggler + label::after{
top: -10px;
}
.menu-item:nth-child(1) a{
transform: rotate(0deg);
}
.menu-item:nth-child(2) a{
transform: rotate(-60deg);
}
.menu-item:nth-child(3) a{
transform: rotate(-120deg);
}
.menu-item:nth-child(4) a{
transform: rotate(-180deg);
}
.menu-item:nth-child(5) a{
transform: rotate(-240deg);
}
.menu-item:nth-child(6) a{
transform: rotate(-30deg);
}
.menu-item{
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 80px;
height: 80px;
opacity: 0;
transition: 0.5s;
}
.menu-itema{
display: block;
width: inherit;
height: inherit;
line-height: 80px;
color: rgba(255,255,255,0.7);
background: rgba(255,255,255,0.2);
border-radius: 50%;
text-align: center;
text-decoration: none;
font-size: 40px;
pointer-events: none;
transition: 0.2s;
}
.menu-itema:hover{
box-shadow: 0002pxrgba(255,255,255,0.3);
color: #fff;
background: rgba(255,255,255,0.3);
font-size: 45px;
}
</style></head><body><navclass="menu"><inputtype="checkbox"class="menu-toggler"id="menu_toggler"checked><labelfor="menu_toggler"></label><ul><liclass="menu-item"><ahref="#"><iclass="fa fa-qq"aria-hidden="true"></i></a></li><liclass="menu-item"><ahref="#"><iclass="fa fa-weixin"aria-hidden="true"></i></a></li><liclass="menu-item"><ahref="#"><iclass="fa fa-weibo"aria-hidden="true"></i></a></li><liclass="menu-item"><ahref="#"><iclass="fa fa-tencent-weibo"aria-hidden="true"></i></a></li><liclass="menu-item"><ahref="#"><iclass="fa fa-telegram"aria-hidden="true"></i></a></li><liclass="menu-item"><ahref="#"><iclass="fa fa-renren"aria-hidden="true"></i></a></li></ul></nav></body></html>


目录
相关文章
|
3天前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
16 3
|
1月前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
1月前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
23天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
23天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
102 1
|
28天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
41 3
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
31 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
CSS3 3D旋转下拉菜单
在线演示 本地下载
1227 0
|
4月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果