html导航怎么加图标，纯CSS实现导航图标动画
毫⽆艺术细胞的我，⼀直以来都只会切图⽽不会做图。正如前⼏天，我给博客导航菜单加上简单的动画，就显得违和感⼗⾜。感叹 2017的现在，做⽹站普遍已经不⽤过多的考虑 IE 系列浏览器，⼀些简单的动画可以完全采⽤ CSS3 实现。
今天，我在 Dribbble 上看到个导航图标过渡动画[1]，如下：
感觉挺好玩的，就尝试使⽤ CSS 实现。最终还没完全实现，下⾯将过程列出来。
CSS 实现图标
图标看起来很简单，就采⽤⼀个标签实现即可。初始化是三道横，本体、:before和:after ⼀个⼀道。
/* 为了⽅便查看，居中⼀下 */
html, body{
height: 100%;
width: 100%;
margin: 0;
background-color: #272e31;
display: flex;
justify-content: center;
align-items: center;
}
.icon-menu,
.icon-menu:before,
.icon-menu:after{
box-sizing: border-box;
width: 72px;
height: 8px;
background-color: #1ca1e3;
display: block;
}
.
icon-menu{
position: relative;
}
.icon-menu:before,
.icon-menu:after{
position: absolute;
right: 0;
content: "";
}
.icon-menu:before{
top: -24px;
}
.icon-menu:after{
bottom: -24px;
}
变换后的图形，即箭头，看图箭头应该是在左边的。考虑到要加动画，所以它原本应该是在右边。将整个图形逆时针旋转 180 度，并把:before、:after 两个伪元素调整下⼤⼩、位置，相应做 45 度旋转，下⾯的属性覆盖上去即变成⼀个箭头。
.icon-menu{
transform: rotate(-180deg);
}
.icon-menu:before,
.icon-menu:after{
width: 45px;
right: -10px;
}
.icon-menu:before{
top: -13px;
transform: rotate(45deg);
}
.icon-menu:after{
bottom: -13px;
transform: rotate(-45deg);
}
CSS 实现动画
CSS 动画最常⽤的莫过于 transition 属性，考虑到导航⼀般采⽤点击来弹出菜单，这⾥采⽤ checkbox + label 组合做为开关，HTML + CSS 如下。
html,
body{
height: 100%;
width: 100%;
margin: 0;
background-color: #272e31;
display: flex;
justify-content: center;
align-items: center;
}
.nav-checkbox{
display: none;
}
.nav-label{
width: 72px;
height: 72px;
display: flex;
justify-content: center;
align-items: center;
}
.
icon-menu,
.icon-menu:before,
.icon-menu:after{
box-sizing: border-box;
width: 72px;
height: 8px;
background-color: #1ca1e3;
display: block;
transition: all 1s;
}
.icon-menu{
position: relative;
}
.icon-menu:before,
.icon-menu:after{
position: absolute;
right: 0;
content: "";
}
.icon-menu:before{
top: -24px;
}
.
icon-menu:after{
bottom: -24px;
}
#toggle:checked ~ [for="toggle"] .icon-menu{
transform: rotate(-180deg);
}
#toggle:checked ~ [for="toggle"] .icon-menu:before,
#toggle:checked ~ [for="toggle"] .icon-menu:after{
width: 45px;
right: -10px;
}
#toggle:checked ~ [for="toggle"] .icon-menu:before{
top: -13px;
transform: rotate(45deg);
}
box sizing#toggle:checked ~ [for="toggle"] .icon-menu:after{
bottom: -13px;
transform: rotate(-45deg);
}
看起来像模像样的，实际上还差很多。区别最明显的是，原图的返回动画并不是原路返回(也即顺时针旋转)，⽽是继续逆时针旋转。在这⾥换⼀种实现动画的思路，将开关改成两个动画，采⽤ CSS Animations 来实现，CSS 修改为：
html,
body {
height: 100%;
width: 100%;
margin: 0;
background-color: #272e31; display: flex;
justify-content: center;
align-items: center;
}
.nav-checkbox {
display: none;
}
.
nav-label {
width: 72px;
height: 72px;
display: flex;
justify-content: center;
align-items: center;
}
.icon-menu,
.icon-menu:before,
.icon-menu:after {
box-sizing: border-box; width: 72px;
height: 8px;
background-color: #1ca1e3; display: block;
}
.icon-menu {
position: relative;
margin: auto 0;
animation: off 1s ease-in-out; }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。