博客从Wordpress改成Typecho的第一篇文章，就决定写这个最新创作，突发灵感想像出来的移动端Menu效果。
说来惭愧，没改成Typecho之前就一篇文章，也是一个Menu，因为懒，所以只有一篇，还是几年前写的，效果倒是还不错，就是照比现在实在是有点拿不出手了，具体效果可以看www.024ylmy.com的移动端风格，那也肯定比最早的www.aen-valve.com好多了，每一次做，都会思考这个怎么更炫酷，怎么更合理，直到前不久给朋友做站的时候，突然灵感蹦出来，就耐着性子做出来了，www.ioit.cn上可以看到最初想法的效果。
更换Typecho后，一眼相中了现在用的这个主题，我实在是懒得折腾从默认的Typecho改风格，遇到一个觉得不错的，主要是作者人不错，免费提供。再次感谢作者，页面底部有作者博客链接，从他那儿能看到原主题原汁原味的效果。
昨晚看国外网站时，特意留意了Menu效果，大多数还是从三道杠改成红叉，然后弹出菜单，也有特别有创意的，过阵子我会把那个效果扒下来，最初给朋友做站的时候，也是传统想法，我大多数灵感都来源于离开电脑前，吃饭时，蹲WC时，我就想这三道杠分离着离开Menu区域，导航内容出现的区域借用这分离的Menu三道杠独立的飘过，再变成文字，从之前做渐变文字来的灵感，用background-clip:text;将文字显示出来，这效果真的是太有想法了。
就在昨晚浏览外国网站时，发现了红叉的显示效果，觉得更合理，所以昨晚到今天凌晨，就用自己的方法把红叉也改了一下，这和ioit.cn的效果又不一样了，手机访问此站可以看到最终效果。
:root {
--menu-default: #333, #333;
}
.nav{position:relative; display:flex; align-items: center; justify-content: flex-end; height:48px; background:#e3e3e3; z-index:999;}
span.boo-menu {
display: block;
width: 40px;
height: 40px;
background: linear-gradient(var(--menu-default)) no-repeat 5px 8px/30px 4px, linear-gradient(var(--menu-default)) no-repeat 5px 18px/16px 4px, linear-gradient(var(--menu-default)) no-repeat 20px 18px/15px 4px, linear-gradient(var(--menu-default)) no-repeat 5px 28px/30px 4px;
transition: .3s;
}
span.close-menu {
--menu-default: #3339, #3339;
background-position: 0 40px, -30px 40px, 40px 40px, 40px 40px;
transition: .7s;
}
span.boo-menu:after {
content:"";
position: absolute;
width: 40px;
height: 40px;
background:linear-gradient(-45deg, transparent, transparent calc(50% - 2px), #e64a4e calc(50% - 2px), #e64a4e calc(50% + 2px), transparent calc(50% + 2px), transparent) no-repeat right top/0 0,
linear-gradient(45deg, transparent, transparent calc(50% - 2px), #e64a4e calc(50% - 2px), #e64a4e calc(50% + 2px), transparent calc(50% + 2px), transparent) no-repeat -40px -40px/40px 40px;
mask: linear-gradient(45deg, transparent, transparent calc(50% - 2px), #e64a4e calc(50% - 2px), #e64a4e calc(50% + 2px), transparent calc(50% + 2px), transparent) no-repeat center center/24px 24px,
linear-gradient(-45deg, transparent, transparent calc(50% - 2px), #e64a4e calc(50% - 2px), #e64a4e calc(50% + 2px), transparent calc(50% + 2px), transparent) no-repeat center center/24px 24px;
-webkit-mask: linear-gradient(45deg, transparent, transparent calc(50% - 2px), #e64a4e calc(50% - 2px), #e64a4e calc(50% + 2px), transparent calc(50% + 2px), transparent) no-repeat center center/24px 24px,
linear-gradient(-45deg, transparent, transparent calc(50% - 2px), #e64a4e calc(50% - 2px), #e64a4e calc(50% + 2px), transparent calc(50% + 2px), transparent) no-repeat center center/24px 24px;
transition: .3s;
}
span.close-menu:after {
content:"";
position: absolute;
width: 40px;
height: 40px;
background: linear-gradient(-45deg, transparent, transparent calc(50% - 2px), #e64a4e calc(50% - 2px), #e64a4e calc(50% + 2px), transparent calc(50% + 2px), transparent) no-repeat right top/40px 40px,
linear-gradient(45deg, transparent, transparent calc(50% - 2px), #e64a4e calc(50% - 2px), #e64a4e calc(50% + 2px), transparent calc(50% + 2px), transparent) no-repeat left top/40px 40px;
mask: linear-gradient(45deg, transparent, transparent calc(50% - 2px), #e64a4e calc(50% - 2px), #e64a4e calc(50% + 2px), transparent calc(50% + 2px), transparent) no-repeat center center/24px 24px,
linear-gradient(-45deg, transparent, transparent calc(50% - 2px), #e64a4e calc(50% - 2px), #e64a4e calc(50% + 2px), transparent calc(50% + 2px), transparent) no-repeat center center/24px 24px;
-webkit-mask: linear-gradient(45deg, transparent, transparent calc(50% - 2px), #e64a4e calc(50% - 2px), #e64a4e calc(50% + 2px), transparent calc(50% + 2px), transparent) no-repeat center center/24px 24px,
linear-gradient(-45deg, transparent, transparent calc(50% - 2px), #e64a4e calc(50% - 2px), #e64a4e calc(50% + 2px), transparent calc(50% + 2px), transparent) no-repeat center center/24px 24px;
transition: background-size .3s .7s, background-position .3s .9s;
}
.nav-list {
position: fixed;
left: 0;
right: 0;
top: -60px;
z-index: 900;
display: flex;
align-items: center;
justify-content: space-around;
height: 60px;
transition: .5s;
background: rgba(40, 50, 57, .75);
backdrop-filter: blur(4px);
}
.nav-list a {
position: relative;
display: flex;
align-items: center;
height: 36px;
color: transparent;
background: linear-gradient(#fff3, #fff3) no-repeat top center/15px 0;
font-size: 16px;
font-weight: bold;
transition: .3s;
}
.nav-list-top {
top:48px;
transition: .5s;
}
.nav-list-top a {
animation: navMenuText .3s .7s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.nav-list-top a.active {
animation: navMenuTextActive .3s .7s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
background: linear-gradient(#fe0, #fe0) no-repeat -10vw -10vw/0 0, linear-gradient(#fff3, #fff3) no-repeat top center/15px 0;
color: transparent;
transition: .3s, background-position .3s .7s;
}
.nav-list-top a:after {
content:"";
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 2px;
background: linear-gradient(#fe0, #fe0) no-repeat center bottom/var(--menu-active, 0) 2px;
transition: .3s;
}
.nav-list-top a.active:after {
animation: navMenuTextActiveAfter .3s 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transition: .3s;
}
@keyframes navMenuText {
0% {
background: linear-gradient(#fff3, #fff3) no-repeat top right/15px 0;
}
25% {
background: linear-gradient(#fff3, #fff3) no-repeat top right/15px 4px;
}
75% {
background: linear-gradient(#fff3, #fff3) no-repeat center center/15px 4px;
}
90% {
background: linear-gradient(#fff9, #fff9) no-repeat center center/32px 8px;
}
100% {
background: linear-gradient(#fff, #fff) no-repeat center center/100% 100%;
background-clip: text;
-webkit-background-clip: text;
}
}
@keyframes navMenuTextActive {
0% {
background: linear-gradient(#fe0, #fe0) no-repeat -10vw -10vw/100% 100%, linear-gradient(#fff3, #fff3) no-repeat top right/15px 0;
}
25% {
background: linear-gradient(#fe0, #fe0) no-repeat -10vw -10vw/100% 100%, linear-gradient(#fff3, #fff3) no-repeat top right/15px 4px;
}
75% {
background: linear-gradient(#fe0, #fe0) no-repeat -10vw -10vw/100% 100%, linear-gradient(#fff3, #fff3) no-repeat center center/15px 4px;
}
90% {
background: linear-gradient(#fe0, #fe0) no-repeat -10vw -10vw/100% 100%, linear-gradient(#fff9, #fff9) no-repeat center center/32px 8px;
}
100% {
background: linear-gradient(#fe0, #fe0) no-repeat center center/100% 100%, linear-gradient(#fff, #fff) no-repeat center center/100% 100%;
background-clip: text;
-webkit-background-clip: text;
transition: .3s;
}
}
@keyframes navMenuTextActiveAfter {
0% {
--menu-active: 0;
}
100% {
--menu-active: 40%;
}
}
.darkmode-active {
--menu-default: #fff, #fff;
}
.darkmode-active span.close-menu {
--menu-default: #fff9, #fff9;
}如果你喜欢，拿去用吧
点此预览Demo
南巷清风(主题作者)
蜡客生活系
小胖脸的博客