分享侧栏例子

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>分享</title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         #sideBar {
13             position: relative;
14             top: 100px;
15             width: 300px;
16             height: 500px;
17             background: #abcdef;
18             -webkit-transition: all 1s;
19             -webkit-transform: translateX(-200px);
20         }
21 
22         #sideBar:hover{
23             -webkit-transform: translateX(0px);
24         }
25 
26         .left {
27             float: left;
28             width: 200px;
29             height: 100%;
30             background: red;
31         }
32 
33         .right {
34             float: right;
35             width: 100px;
36             height: 100%;
37             background: blue;
38         }
39     </style>
40 </head>
41 <body>
42 <div id="sideBar">
43     <div class="left"></div>
44     <div class="right"></div>
45 </div>
46 </body>
47 </html>