鼠标移入，流线走出三角形，移除消失；
一，首先让三条线的宽度为0；
二，旋转；
transform: rotate(-120deg);
三，transition:<过渡属性名称> <过渡时间> <过渡模式>，ex：
transition: width 0.5s linear;
四，在过渡效果开始前等待 1秒：
transition-delay: 1s;
完整：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style> .hover { width: 300px; height: 300px; border: 1px solid #000; background-color: #fff; position: relative; } .hover .line { position: absolute; width: 0; height: 1px; background-color: red; transform-origin: 0 0; transition: width 0.5s linear; } .hover .line1 { left: 50px; bottom: 50px; } .hover .line2 { left: 250px; bottom: 49px; transform: rotate(-120deg); transition-delay: 0.5s; } .hover .line3 { left: 150px; top: 77px; transform: rotate(-240deg); } .hover.move-on .line1 { transition-delay: 0s; } .hover.move-on .line3 { /*在过渡效果开始前等待 1 秒*/ transition-delay: 1s; } .hover.move-out .line1 { transition-delay: 1s; } .hover.move-out .line3 { transition-delay: 0s; } .hover:hover .line { width: 200px; } </style> </head> <body> <div class="hover"> <div class="line line1">1</div> <div class="line line2">2</div> <div class="line line3">3</div> </div> <script> // $('.hover').hover(function () { // $(this).removeClass('move-out').addClass('move-on'); // },function () { // $(this).removeClass('move-on').addClass('move-out'); // }) </script> </body> </html>
