纯css实现的导航按钮图标样式切换效果,图标样式是css画出来的,再辅以css3动画效果。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3效果切换的导航按钮</title> <style type="text/css"> *{ margin: 0; padding: 0; } body { background: #3B9DFF; } .menuCtrl { display: block; position: relative; border: 5px solid #fff; border-radius: 50%; width: 30px; height: 40px; padding: 20px 25px; margin: 150px auto; transition: all 0.25s ease-in-out; } .menuCtrl .line { width: 35px; height: 0; border-bottom: 5px solid #fff; position: relative; margin-left: -2px; transition: all 0.25s ease-in-out; } .menuCtrl .line:nth-child(1) { top: 10px; } .menuCtrl .line:nth-child(2) { top: 13px; } .menuCtrl .line:nth-child(3) { top: 16px; } .menuCtrl:hover { padding: 25px 30px; } .menuCtrl:hover .line:nth-child(1) { width: 20px; transform: rotateZ(-45deg) translateX(-3px) translateY(0px); } .menuCtrl:hover .line:nth-child(2) { width: 40px; } .menuCtrl:hover .line:nth-child(3) { width: 20px; transform: rotateZ(45deg) translateX(-3px) translateY(0px); } </style> </head> <body> <a href="javascript:;" class="menuCtrl"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </a> </body> </html>
|