今天给大家分享一个代码，侧边多彩磁铁导航【注意：这个代码在QQ和微信自带的浏览器不会有效果，但不影响美观】
不要用电脑打开，你会看不到效果。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .lalalala { position: fixed; width: 0px; z-index: 9999999; } .wawdy { display: inline-block; float: right; clear: both; } .card { position: relative; /* 此处表示想左隐藏的程度*/ left: 19px; padding: 16px 32px 16px 64px; /*此处表示铁块之间的距离*/ margin: 5px; x-box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.5); box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.5); background: #fff; /* 過渡*/ } .card:hover { position: relative; left: 100%; margin-left: -32px; box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.5), 0 8px 8px -8px rgba(0, 0, 0, 0.5); transition: all 0.5s ease-in-out; } .card-lalala { color: #fff; font-family: 'Droid Sans', sans-serif; font-size: 16px; white-space: nowrap; } .bg-01 { background: #00FFCC; } .bg-02 { background: #F36; } .bg-03 { background: #9CF; } .lalalala { margin-top: 282px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } </style> </head> <body> <div class='lalalala'> <div class='wawdy'> <div class='card bg-01'><span class='card-lalala'> <a href='http://wawdy.kuaizhan.com/83/14/p306468906c6293'> 语录控提交</a></span> </div> </div> <div class='wawdy'> <div class='card bg-02'><span class='card-lalala'><a href='http://wawdy.kuaizhan.com/2/94/p29428151442ae8'>打开脑洞</a></span> </div> </div> <div class='wawdy'> <div class='card bg-03'><span class='card-lalala'><a href='http://wawdy.kuaizhan.com/70/62/p26130864312c48'>唯美图文</a></span> </div> </div> </div> </body> </html>
