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>