三角形 | 易学教程

鼠标移入，流线走出三角形，移除消失；

一，首先让三条线的宽度为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>

来源：https://www.cnblogs.com/wang715100018066/p/6387234.html

标签

transition