标签：
<!DOCTYPE html> <html> <head> <style type="text/css"> body{ margin: 0px; } div { margin-left: 50px; width:300px; height:50px; position:absolute; border-radius:25px; transition:width 2s; -webkit-transition:width 2s; /* Safari and Chrome */ } div:hover { width:500px; } div h1,h2,h3,h4,h5{ float: right; margin-top: 10px; } .div_1{ margin-top: 100px; background-color: rgb(255,0,0); } .div_2{ margin-top: 120px; background-color: rgb(0,255,0); } .div_3{ margin-top: 140px; background-color: rgb(0,0,255); } .div_4{ margin-top: 160px; background-color: rgb(50,155,55); } .div_5{ margin-top: 180px; background-color: rgb(50,50,155); } </style> <title></title> </head> <body> <div> <div class="div_1"><h1>板块一</h1></div> <div class="div_2"><h2>板块二</h2></div> <div class="div_3"><h3>板块三</h3></div> <div class="div_4"><h4>板块四</h4></div> <div class="div_5"><h5>板块五</h5></div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/ermu-learn/p/5168969.html
