CSS导航切换实现
撰写时间： 2019-11-28 总共： 1202 字 转载请注明： BY-SA 4.0（除特别声明或转载文章外）
实现某些动画效果
首先分析需要怎么样的效果，根据需求添加合适的css属性。
比如添加2d或者3d反转效果等。
第一个点就是如何控制点击的时候像js一样动态更改样式，这里使用这2个标签来实现。
<input>、<lable>、
编写具体代码
利用这两个标签的for与id属性来对应是否点击，根据输入标签的类型选择复选框等。
<!--nav.html-->
<span class="logo">
<input id="menu" role="checkbox" class="toggle" type="checkbox" >
<label for="menu" class="avatar">
<img src="···" alt="霁">
</label>
<label class="mask" for="menu"></label>
<ul class="box-shadow menu" role="menubar">
<li role="menuitem" tabindex="0">
<a href="/" title="首页" tabindex="0">
首页
</a>
</li>
</ul>
</span>
直接从代码这里分析，一共是使用两个label对应一个隐藏的输入框，来达到 true or false 的选择。
然后根据输入框是否被选择来更改列表的样式，以达到更改样式的效果，整体上就是如此。
具体就是通过样式的选择器来实现更改。
/* style.css */
.toggle {
display: none;
}
/*
遮罩层，主要在点击非toggle区域
的主lable的时候取消选择状态
*/
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: none;
}
/* 根据选择器在input 被 checked的时候进行更改样式 */
.toggle:checked~.mask {
display: block;
-webkit-tap-highlight-color: transparent;
}
.toggle:checked~.menu {
pointer-events: auto;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
.toggle:checked~.avatar img {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
总结一下
利用css实现一些样式修改的效果，减少使用js进行控制样式。灵活使用一些html标签与css的选择器进行搭配使用。
