php单页菜单,CSS3单页切换导航菜单界面设计的实现详解
这是一款使用纯CSS3制作的单页切换导航菜单界面设计效果。该页面效果中,在页面的左侧垂直排放一组导航按钮,当点击导航按钮时,相应的页面会从屏幕右侧滑动出来,效果非常炫酷。
使用方法
HTML结构
该单页切换导航菜单界面的HTML结构如下:
Bolt...
Type
Rocket
Dribbble
Im ready to play, invite me find me
...
More
...
CSS样式
该单页切换导航菜单界面使用transform和transition来制作页面的切换动画效果。并通过:target伪元素来完成按钮点击时的页面切换。完整的CSS代码如下,代码中没有添加浏览器厂商的前缀。html, body, .page {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
transition: all .6s cubic-bezier(.5, .2, .2, 1.1);
color: #fff;
overflow: hidden;
}
* {
font-family: 'open sans', 'lato', 'helvetica', sans-serif;
}
.page {
position: absolute;
}
#p1 {
left: 0;
}
#p2, #p3, #p4, #p5 {
left: 200%;
}
#p1 { background: darkslateblue; }
#p2 { background: tomato; }
#p3 { background: gold; }
#p4 { background: deeppink; }
#p5 { background: #9b59b6; }
#t2:target #p2,
#t3:target #p3,
#t4:target #p4,
#t5:target #p5 {
transform: translateX(-190%);
transition-delay: .4s !important;
}
#t2:target #p1,
#t3:target #p1,
#t4:target #p1,
#t5:target #p1{
background: black;
}
#t2:target #p1 .icon,
#t3:target #p1 .icon,
#t4:target #p1 .icon,
#t5:target #p1 .icon {
-webkit-filter: blur(3px);
filter: blur(3px);
}
.icon {
color: #fff;
font-size: 32px;
display: block;
}
ul .icon:hover {
opacity: 0.5;
}
.page .icon .title {
line-height: 2;
}
#t2:target ul .icon,
#t3:target ul .icon,
#t4:target ul .icon,
#t5:target ul .icon{
transform: scale(.6);
transition-delay: .25s;
}
#t2:target #dos,
#t3:target #tres,
#t4:target #cuatro,
#t4:target #cinco {
transform: scale(1.2) !important;
}
ul {
position: fixed;
z-index: 1;
top: 0;
bottombottom: 0;
left: 0;
margin: auto;
height: 280px;
width: 10%;
padding: 0;
text-align: center;
}
#menu .icon {
margin: 30px 0;
transition: all .5s ease-out !important;
}
a {
text-decoration: none;
}
.title, .hint {
display: block;
}
.title {
font-size: 38px;
}
.hint {
font-size: 13px;
}
#p4 .hint {
display: inherit !important;
}
.hint a {
color: yellow;
transition: all 250ms ease-out;
}
.hint a:hover {
color: #FFF;
}
.line-trough {
text-decoration: line-through;
}
.page .icon {
position: absolute;
top: 0;
bottombottom: 0;
rightright: 10%;
left: 0;
width: 270px;
height: 170px;
margin: auto;
text-align: center;
font-size: 80px;
line-height: 1.3;
transform: translateX(360%);
transition: all .5s cubic-bezier(.25, 1, .5, 1.25);
}
.page#p1 .icon {
height: 220px;
}
.page#p1 .icon {
transform: translateX(10%) !important;
}
#t2:target .page#p2 .icon,
#t3:target .page#p3 .icon,
#t4:target .page#p4 .icon,
#t5:target .page#p5 .icon {
transform: translateX(0) !important;
transition-delay: 1s;
}
以上这篇纯CSS3单页切换导航菜单界面设计的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持PHP中文网。
更多CSS3单页切换导航菜单界面设计的实现详解相关文章请关注PHP中文网!
本文原创发布php中文网,转载请注明出处,感谢您的尊重!
php单页菜单,CSS3单页切换导航菜单界面设计的实现详解相关推荐
- vue3.0+ts+element-plus多页签应用模板:侧边导航菜单(上)
目录 系列文章 一.先说点什么 二.从问题开始,侧边栏是干啥的? 三.封装组件之思路分析 四.封装菜单部分 1. MenuItem 2. ModuleMenu 系列文章 vue3.0+ts+eleme ...
- android 图片横竖判断_Android横竖屏切换及其对应布局加载问题详解
本文为大家分享了Android横竖屏切换及其对应布局加载问题,供大家参考,具体内容如下 第一,横竖屏切换连带横竖屏布局问题: 如果要让软件在横竖屏之间切换,由于横竖屏的高宽会发生转换,有可能会要求不同 ...
- Php开源h5相册系统,HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
- python将图像转换为8位单通道_【图像处理】OpenCV系列三十五--- equalizeHist函数详解...
上一节,我们学习了如何对两个直方图进行比较,看两幅图像的相似度是多少,经过上节的学习,相信大家对compareHist函数已经有了一个清晰的理解,本届呢,我们学习如何对一幅图像进行均衡化! 1.函数原 ...
- 单E1光端机,V.35光端机,以太网光端机介绍及技术指标详解
光猫也称为单端口光端机,是针对特殊用户环境而设计的产品,它利用一对光纤进行单E1或单V.35或单10BaseT点到点式的光传输终端设备.光猫有E1光猫,以太网光猫,V35光端机等,那么,什么是单E1光 ...
- CSS3综合练习,导航菜单的制作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- wordpress菜单显示css字体,WordPress导航菜单图标字体插件font awesome 4 menus
用了wordpress后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果.不过,在强迫症的眼里,能代码化就尽量不用插件吧!于是将这个插件改造成代码版,顺便精简了基本用不到的 sh ...
- html旋转的环形菜单,前端开发圆形旋转导航菜单教程
/p> 前端开发商城页面:圆形旋转导航菜单 html, body { padding: 0; margin: 0; } 圆形菜单[最多容纳8个最大正方形菜单块, 若需容纳更多的菜单块,则需要缩小 ...
- element菜单组件样式修改NavMenu导航菜单
NavMenu导航菜单 1.选中菜单的颜色 .el-menu-item.is-active {background-color: #41a3fb !important; } 2.菜单hover颜色 . ...
- 判断单链表是否存在环,判断两个链表是否相交问题详解(转)
转自:http://www.cppblog.com/humanchao/archive/2008/04/17/47357.html 有一个单链表,其中可能有一个环,也就是某个节点的next指向的是链表 ...
最新文章
- Computed property XXX was assigned to but it has no setter
- 微服务注册中心如何承载大型系统的千万级访问?
- C1 FlexGrid 行Style设置问题
- python中collections_Python中collections模块的基本使用教程
- vue中如何关闭eslint检测?
- 未付服务网关限流作用
- jboss linux 性能,搭建jprofiler对jboss性能监控
- linux-新建一个centos虚拟机系统-安装全过程图示
- java+ext.ajax,[转载]Ext Ajax:怎么调用Ext.Ajax.request方法和使用Java Servlet进行处理
- Bailian2911 受限完全平方数【暴力】
- 89C52定时/计数器
- 几点减几点怎么列算式_结婚邀请函怎么写样板 结婚邀请函有哪几点是必写的...
- MySQL设置mysqld_MySQL指定mysqld启动时所加载的配置文件
- 医院时钟系统(子母钟系统)构成及应用
- 红帽子企业版RHEL5.0 的软件包管理
- 二层交换机,三层交换机,四层交换机的区别
- 制造业数字化转型内涵和过程
- vi 放弃更改退出 保存更改退出。
- 点击跳出商务通对话框
- js 去掉字符串最后一个逗号