移动端原创Menu,纯CSS实现所有动画

CSS 2023-05-27 阅读:2211

博客从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

2212