前端知识
源码下载
软件工具
合作案例
AI代码
菜单
搜索
首页
前端知识
css折叠的导航栏
css折叠的导航栏
2024-05-22 09:05:50
前端知识
前端哥
713
817
我要收藏
"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>location<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/location.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/message.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>phone<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/phone.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>share<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/share.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 第二个导航 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav_b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chk2<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chk2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chk2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>plus<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/plus.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>location<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/location.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/message.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>phone<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/phone.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>share<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/share.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>location2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/location.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/message.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 第三个导航 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav_c<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chk3<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chk3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chk3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>plus<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/plus.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>location3 icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/location.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message5 icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/message.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>phone icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/phone.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>share5 icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/share.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>phone2 icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/phone.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message3 icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/message.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 第四个导航 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav_d<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chk4<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chk4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chk4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>plus<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/plus.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>location<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/location.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/message.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>phone<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/phone.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>share<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/share.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 第五个导航 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav_e<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chk5<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chk5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chk5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>plus<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/plus.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>location<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/location.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/message.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>phone<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/phone.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>share<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/share.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 第六个导航 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav_f<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chk6<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chk6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chk6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>plus<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/plus.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>location<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/location.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/message.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>phone<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/phone.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>share<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./images/share.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="prism language-css"> <span class="token selector">.cont</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 810px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 578px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #eceff1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">input</span> <span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 第一个导航 */</span> <span class="token selector">.nav_a</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 270px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_a div</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 55px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">transition</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_a .plus</span> <span class="token punctuation">{<!-- --></span> <span class="token property">z-index</span><span class="token punctuation">:</span> 999<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_a img</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_a div:hover</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_a input[name="chk"]:checked~label>.plus</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span> <span class="token function">scale</span><span class="token punctuation">(</span>0.7<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_a input[name="chk"]:checked~.location</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-80px<span class="token punctuation">,</span> -70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_a input[name="chk"]:checked~.message</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>80px<span class="token punctuation">,</span> -70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_a input[name="chk"]:checked~.phone</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-80px<span class="token punctuation">,</span> 70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_a input[name="chk"]:checked~.share</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>80px<span class="token punctuation">,</span> 70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 第二个导航 */</span> <span class="token selector">.nav_b</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 270px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_b div</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 55px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 370px<span class="token punctuation">;</span> <span class="token property">transition</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_b .plus</span> <span class="token punctuation">{<!-- --></span> <span class="token property">z-index</span><span class="token punctuation">:</span> 999<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_b img</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_b div:hover</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_b input[name="chk2"]:checked~label>.plus</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span> <span class="token function">scale</span><span class="token punctuation">(</span>0.7<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_b input[name="chk2"]:checked~.location</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-70px<span class="token punctuation">,</span> -40px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_b input[name="chk2"]:checked~.message</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>70px<span class="token punctuation">,</span> -40px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_b input[name="chk2"]:checked~.phone</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-70px<span class="token punctuation">,</span> 40px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_b input[name="chk2"]:checked~.share</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>70px<span class="token punctuation">,</span> 40px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_b input[name="chk2"]:checked~.location2</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0px<span class="token punctuation">,</span> -70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_b input[name="chk2"]:checked~.message2</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0px<span class="token punctuation">,</span> 70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 第三个导航 */</span> <span class="token selector">.nav_c</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 270px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_c .plus</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 55px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 650px<span class="token punctuation">;</span> <span class="token property">transition</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_c .icon</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 55px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 650px<span class="token punctuation">;</span> <span class="token property">transition</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_c .plus</span> <span class="token punctuation">{<!-- --></span> <span class="token property">z-index</span><span class="token punctuation">:</span> 999<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_c img</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_c div:hover</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_c input[name="chk3"]:checked~label>.plus</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span> <span class="token function">scale</span><span class="token punctuation">(</span>0.7<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_c input[name="chk3"]:checked~.location3</span> <span class="token punctuation">{<!-- --></span> <span class="token property">animation</span><span class="token punctuation">:</span> location3 1s linear forwards<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@keyframes</span> location3</span> <span class="token punctuation">{<!-- --></span> <span class="token selector">0%</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">.nav_c input[name="chk3"]:checked~.message5</span> <span class="token punctuation">{<!-- --></span> <span class="token property">animation</span><span class="token punctuation">:</span> message5 1s linear forwards<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@keyframes</span> message5</span> <span class="token punctuation">{<!-- --></span> <span class="token selector">0%</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform-origin</span><span class="token punctuation">:</span> 25px 95px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>180deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform-origin</span><span class="token punctuation">:</span> 25px 95px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">.nav_c input[name="chk3"]:checked~.phone</span> <span class="token punctuation">{<!-- --></span> <span class="token property">animation</span><span class="token punctuation">:</span> phone 1s linear forwards<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@keyframes</span> phone</span> <span class="token punctuation">{<!-- --></span> <span class="token selector">0%</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform-origin</span><span class="token punctuation">:</span> 25px 95px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>125deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform-origin</span><span class="token punctuation">:</span> 25px 95px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">.nav_c input[name="chk3"]:checked~.share5</span> <span class="token punctuation">{<!-- --></span> <span class="token property">animation</span><span class="token punctuation">:</span> share5 1s linear forwards<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@keyframes</span> share5</span> <span class="token punctuation">{<!-- --></span> <span class="token selector">0%</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform-origin</span><span class="token punctuation">:</span> 25px 95px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>60deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform-origin</span><span class="token punctuation">:</span> 25px 95px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">.nav_c input[name="chk3"]:checked~.phone2</span> <span class="token punctuation">{<!-- --></span> <span class="token property">animation</span><span class="token punctuation">:</span> phone2 1s linear forwards<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@keyframes</span> phone2</span> <span class="token punctuation">{<!-- --></span> <span class="token selector">0%</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform-origin</span><span class="token punctuation">:</span> 25px 95px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>235deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform-origin</span><span class="token punctuation">:</span> 25px 95px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">.nav_c input[name="chk3"]:checked~.message3</span> <span class="token punctuation">{<!-- --></span> <span class="token property">animation</span><span class="token punctuation">:</span> message3 1s linear forwards<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@keyframes</span> message3</span> <span class="token punctuation">{<!-- --></span> <span class="token selector">0%</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform-origin</span><span class="token punctuation">:</span> 25px 95px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-70px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>295deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform-origin</span><span class="token punctuation">:</span> 25px 95px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">/* 第四个导航 */</span> <span class="token selector">.nav_d</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 270px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_d div</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 55px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 350px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">transition</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_d .plus</span> <span class="token punctuation">{<!-- --></span> <span class="token property">z-index</span><span class="token punctuation">:</span> 999<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_d img</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_d div:hover</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_d input[name="chk4"]:checked~label>.plus</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span> <span class="token function">scale</span><span class="token punctuation">(</span>0.7<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_d input[name="chk4"]:checked~.location</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-100px<span class="token punctuation">,</span> -60px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_d input[name="chk4"]:checked~.message</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-40px<span class="token punctuation">,</span> -60px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_d input[name="chk4"]:checked~.phone</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>20px<span class="token punctuation">,</span> -60px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_d input[name="chk4"]:checked~.share</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>80px<span class="token punctuation">,</span> -60px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 第五个导航 */</span> <span class="token selector">.nav_e</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 270px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_e div</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 55px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 350px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 370px<span class="token punctuation">;</span> <span class="token property">transition</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_e .plus</span> <span class="token punctuation">{<!-- --></span> <span class="token property">z-index</span><span class="token punctuation">:</span> 999<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_e img</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_e div:hover</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_e input[name="chk5"]:checked~label>.plus</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span> <span class="token function">scale</span><span class="token punctuation">(</span>0.9<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_e input[name="chk5"]:checked~.location</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-60px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_e input[name="chk5"]:checked~.message</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-115px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_e input[name="chk5"]:checked~.phone</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>60px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_e input[name="chk5"]:checked~.share</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>115px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.message,.share</span><span class="token punctuation">{<!-- --></span> <span class="token property">transition-delay</span><span class="token punctuation">:</span> 0.5s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 第六个导航 */</span> <span class="token selector">.nav_f</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 270px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_f div</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 55px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 350px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 650px<span class="token punctuation">;</span> <span class="token property">transition</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_f .plus</span> <span class="token punctuation">{<!-- --></span> <span class="token property">z-index</span><span class="token punctuation">:</span> 999<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_f img</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_f div:hover</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_f input[name="chk6"]:checked~label>.plus</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span> <span class="token function">scale</span><span class="token punctuation">(</span>0.9<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_f input[name="chk6"]:checked~.location</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-60px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_f input[name="chk6"]:checked~.message</span> <span class="token punctuation">{<!-- --></span> <span class="token property">animation</span><span class="token punctuation">:</span> message 0.5s linear forwards<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@keyframes</span> message</span> <span class="token punctuation">{<!-- --></span> <span class="token selector">0%</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-60px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-115px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">.nav_f input[name="chk6"]:checked~.phone</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>60px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav_f input[name="chk6"]:checked~.share</span> <span class="token punctuation">{<!-- --></span> <span class="token property">animation</span><span class="token punctuation">:</span> share 0.5s linear forwards<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@keyframes</span> share</span> <span class="token punctuation">{<!-- --></span> <span class="token selector">0%</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>60px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>115px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> </div> <div class="article-declare"> 转载请注明出处或者链接地址：<a href="https://www.qianduange.cn//article/9015.html">https://www.qianduange.cn//article/9015.html</a> </div> <div class="share"> <div class="share-box"> <div class="share-text">分享到：</div> <div class="share-content" id="share-content"></div> </div> <div class="zan" class="zan"> <span class="zan-btn"> <i class="fa fa-thumbs-o-up"></i> <a class="dianzanshu digg_link" data-id="9015" data-mid="2" data-type="up" href="javascript:;"> <em class="digg_num icon-num">817</em> </a> <!-- <b class="dianzanshu">{news:digg}</b> --> </span> </div> </div> <div class="tags"> <div class="tags-name">标签</div> </div> <div class="next-up"> <div class="btn-box up"> <!-- <div class="up-title">上一篇</div> --> <div class="contents up-content"> <a href="https://www.qianduange.cn//article/1.html" >上一篇：HTML基本结构及基本标签</a> </div> </div> <div class="btn-box next"> <!-- <div class="up-title">下一篇</div> --> <div class="contents next-content"> <a href="https://www.qianduange.cn//article/9016.html" >下一篇：CSS 滚动条设置：显示方式、样式修改</a> </div> </div> </div> </div> <!-- 预留评论区域 --> <div class="block message" id="pinglun"> <div class="block-name"> <i class="fa fa-pencil-square-o"></i> 评论 </div> <div class="message-content"> <div class="mac_comment" data-id="9015" data-mid="2" ></div> <script> $(function(){ MAC.Comment.Login = 1; MAC.Comment.Verify = 0; MAC.Comment.Init(); MAC.Comment.Show(1); }); </script> </div> </div> <!-- 预留评论区域 --> <div class="block relevant"> <div class="block-name">相关文章</div> <ul class="relevant-list"> <li> <h5> <a href="https://www.qianduange.cn//article/9889.html" title="JavaScript天气预报HTML，JS，CSS网页代码">JavaScript天气预报HTML，JS，CSS网页代码</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/9888.html" title="JavaScript天气预报HTML，JS，CSSCSS代码">JavaScript天气预报HTML，JS，CSSCSS代码</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/9887.html" title="HTML5 网页端年会抽奖源码，导入名单列表即可使用，系统盘点前端开发者必须掌握的知识点">HTML5 网页端年会抽奖源码，导入名单列表即可使用，系统盘点前端开发者必须掌握的知识点</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/9886.html" title="HTML5 常用标签">HTML5 常用标签</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/9884.html" title="HTML5中视频标签学习中出现只显示声音而没有画面的情况。">HTML5中视频标签学习中出现只显示声音而没有画面的情况。</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/9883.html" title="html5播放flv视频">html5播放flv视频</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/9882.html" title="HTML5(一)——新增元素和属性，让人茅塞顿开">HTML5(一)——新增元素和属性，让人茅塞顿开</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/9881.html" title="html5测试题整理--针对标签的概念性，JavaScript的常用内置函数">html5测试题整理--针对标签的概念性，JavaScript的常用内置函数</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/7513.html" title="HTML5新手入门指南">HTML5新手入门指南</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/9879.html" title="HTML5 Web Components如何自定义和扩展Web元素？">HTML5 Web Components如何自定义和扩展Web元素？</a> </h5> </li> </ul> </div> </div> <div class="main-right"> <div class="block user"> <div class="user-name"> <h3> <a href="https://www.qianduange.cn//index.php/cover/info/id/1" title="前端哥"> <img src="https://www.qianduange.cn///static/images/touxiang.png" alt="前端哥"> <p class="name">前端哥</p> </a> </h3> <div class="user-info"></div> </div> </div> <div class="block mytui" style="margin-top: 24px;"> <div class="tui tui-index-1"> <script src="/template/bolg/ads/detail_1.js"></script> </div> </div> <div class="block user-article"> <div class="block-name">发布的文章</div> <div class="blog-article"> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/9890.html" title="优课教育">优课教育</a> </h4> <p class="promote-titme">2024-05-28 17:05:59</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/9889.html" title="JavaScript天气预报HTML，JS，CSS网页代码">JavaScript天气预报HTML，JS，CSS网页代码</a> </h4> <p class="promote-titme">2024-05-28 10:05:55</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/9888.html" title="JavaScript天气预报HTML，JS，CSSCSS代码">JavaScript天气预报HTML，JS，CSSCSS代码</a> </h4> <p class="promote-titme">2024-05-28 10:05:01</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/9887.html" title="HTML5 网页端年会抽奖源码，导入名单列表即可使用，系统盘点前端开发者必须掌握的知识点">HTML5 网页端年会抽奖源码，导入名单列表即可使用，系统盘点前端开发者必须掌握的知识点</a> </h4> <p class="promote-titme">2024-05-28 09:05:21</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/9886.html" title="HTML5 常用标签">HTML5 常用标签</a> </h4> <p class="promote-titme">2024-05-28 09:05:21</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/9885.html" title="html5--表格和列表">html5--表格和列表</a> </h4> <p class="promote-titme">2024-05-28 09:05:21</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/9884.html" title="HTML5中视频标签学习中出现只显示声音而没有画面的情况。">HTML5中视频标签学习中出现只显示声音而没有画面的情况。</a> </h4> <p class="promote-titme">2024-05-28 09:05:09</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/9883.html" title="html5播放flv视频">html5播放flv视频</a> </h4> <p class="promote-titme">2024-05-28 09:05:06</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/9882.html" title="HTML5(一)——新增元素和属性，让人茅塞顿开">HTML5(一)——新增元素和属性，让人茅塞顿开</a> </h4> <p class="promote-titme">2024-05-28 09:05:57</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/9881.html" title="html5测试题整理--针对标签的概念性，JavaScript的常用内置函数">html5测试题整理--针对标签的概念性，JavaScript的常用内置函数</a> </h4> <p class="promote-titme">2024-05-28 09:05:51</p> </div> </div> </div> <div class="block mytui" style="margin-top: 24px;"> <div class="tui tui-index-1"> <script src="/template/bolg/ads/detail_2.js"></script> </div> </div> <div class="block user-article"> <div class="block-name">大家推荐的文章</div> <div class="paihang-list"> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/8979.html" title="VUE3 Vite Pinia TypeScript项目笔记"> <span class="hot-index">1</span> <p class="article-title">VUE3 Vite Pinia TypeScript项目笔记</p> <p class="updateTime">2024-05-20 14:05:19<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/7781.html" title="轻松掌握数据库中JSON数据提取：json_extract函数用法详解"> <span class="hot-index">2</span> <p class="article-title">轻松掌握数据库中JSON数据提取：json_extract函数用法详解</p> <p class="updateTime">2024-05-09 11:05:01<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/7646.html" title="HTML5(六)——Canvas 高级操作"> <span class="hot-index">3</span> <p class="article-title">HTML5(六)——Canvas 高级操作</p> <p class="updateTime">2024-05-09 10:05:19<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/7341.html" title="UE4.27支持HTML5"> <span class="hot-index">4</span> <p class="article-title">UE4.27支持HTML5</p> <p class="updateTime">2024-05-07 13:05:26<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/5820.html" title="前端vue项目使用Decimal.js做加减乘除求余运算"> <span class="hot-index">5</span> <p class="article-title">前端vue项目使用Decimal.js做加减乘除求余运算</p> <p class="updateTime">2024-04-23 21:04:40<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/4565.html" title="js数组常用方法（19种）|你会的到底有多少呢？"> <span class="hot-index">6</span> <p class="article-title">js数组常用方法（19种）|你会的到底有多少呢？</p> <p class="updateTime">2024-04-08 11:04:21<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/3693.html" title="jQuery事件处理"> <span class="hot-index">7</span> <p class="article-title">jQuery事件处理</p> <p class="updateTime">2024-03-12 01:03:32<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/3152.html" title="【Echarts系列】—— 实现电池图、3D立体圆形柱状图"> <span class="hot-index">8</span> <p class="article-title">【Echarts系列】—— 实现电池图、3D立体圆形柱状图</p> <p class="updateTime">2024-03-03 11:03:01<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/2173.html" title="ECharts 饼状图颜色设置"> <span class="hot-index">9</span> <p class="article-title">ECharts 饼状图颜色设置</p> <p class="updateTime">2024-02-16 14:02:00<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/1884.html" title="echarts实现动态渲染多柱图"> <span class="hot-index">10</span> <p class="article-title">echarts实现动态渲染多柱图</p> <p class="updateTime">2024-02-12 14:02:34<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> </div> </div> </div> </div> </div> <!-- main结束 --> <!-- footer --> <div class="footer"> <div class="foot"> <p class="items"> <span><a href="https://www.qianduange.cn//rss/index.xml" title="rss订阅">rss订阅</a></span> <span><a href="https://www.qianduange.cn//rss/baidu.xml" title="百度xml">百度xml</a></span> <span><a href="https://www.qianduange.cn//rss/google.xml" title="谷歌xml">谷歌xml</a></span> <span><a href="https://www.qianduange.cn//rss/sogou.xml" title="搜狗xml">搜狗xml</a></span> <span><a href="https://www.qianduange.cn//rss/so.xml" title="soxml">soxml</a></span> <span><a href="https://www.qianduange.cn//rss/sm.xml" title="神马搜索xml">神马搜索xml</a></span> <span><a href="https://www.qianduange.cn//map.html" title="网站地图">网站地图</a></span> </p> <p class="items"> <span>Copyright © 2018-2022 前端哥</span> <span><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?fd8cbb00c569d2289ab4b9572746ebeb"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script></span> <span><a href="https://beian.miit.gov.cn/" target="_blank">陕ICP备2023000550号-1</a></span> <span> <a href="https://www.qianduange.cn//" title="前端哥">前端哥</a> </span> </p> <p class="suibi">讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！</p> </div> <div class="mobile-footr"> <p class="items"> 前端技术交流源码工具分享网站 </p> </div> </div> <div class="guide"> <div class="guide-wrap"> <a href="javascript:;" class="nav-link edit mac_user" id="user" title="会员中心"><span>会员中心</span></a> <a href="https://www.qianduange.cn//label/contactMe.html" class="find" title="联系我"><span>联系我</span></a> <a href="https://www.qianduange.cn//index.php/gbook/index.html" class="report" title="留言建议"><span>留言建议</span></a> <a href="javascript:window.scrollTo(0,0)" class="top" title="回顶部"><span>回顶部</span></a> </div> </div> <span style="display: none;" class="mac_timming" data-file="" ></span> <script> var userAgent = IEVersion(); if (userAgent <= 11) { location.href = "/browser.html"; } function IEVersion() { var userAgent = navigator.userAgent; var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1; if (isIE) { var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); reIE.test(userAgent); var fIEVersion = parseFloat(RegExp["$1"]); if (fIEVersion == 7) { return 7; } else if (fIEVersion == 8) { return 8; } else if (fIEVersion == 9) { return 9; } else if (fIEVersion == 10) { return 10; } else { return 6; } } else if (isEdge) { return 100; } else if (isIE11) { return 11; } else { return 1000; } } </script> <!-- footer结束 --> <!-- 遮罩层 --> <div class="mask"> <div class="close"></div> </div> <!-- 复制成功提醒 --> <div class="tips"> <div class="tips-text">复制成功！</div> </div> <span style="display:none" class="mac_ulog_set" alt="设置内容页浏览记录" data-type="1" data-mid="2" data-id="9015" data-sid="0" data-nid="0"></span> <span style="display:none" class="mac_history_set" alt="设置History历史记录" data-name="[前端知识]css折叠的导航栏" data-pic="/"></span> <script> hljs.highlightAll(); hljs.initLineNumbersOnLoad({ singleLine:true, startFrom: 5, }); </script> <script> $(function (){ $('#share-content').share({sites: ['qzone', 'qq', 'weibo','wechat']}); setTimeout(function () { setSizeEvent(); },500) }); $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [ o[this.name] ]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; function setSizeEvent(){ let pagew = $(".pagelist").width(); let width = $(".page").width(); let left = (width - pagew) / 2; $(".pagelist").css({"left":left}); let lheight = $(".main-let").height(); let rheight = $(".main-right").height(); if(lheight > rheight){ $(".main-right").height(lheight); } else if(rheight > lheight){ $(".main-let").height(rheight); } let bodyWidth = document.body.offsetWidth; if(bodyWidth < 1080){ $(".main-let").css({"height":"auto"}); } } $(".page").resize(function(){ setSizeEvent(); }); var viewer = new Viewer(document.getElementById('article-content'), { url: 'src' }); </script> <script> let code = []; $(".article-content").find("pre").each(function (){ code.push($(this).find("code").html()); }); </script> </body> </html>
