CodePen Embed - Line Animation Effect

Live

 
<div class="g-container">
    <!--  SVG 实现线条动画 -->
    <div class="g-svg">
        <svg height="100%" width="100%"> xmlns="http://www.w3.org/2000/svg">
            <polyline points="240 10 140 10 140 90 0 90" stroke="#ddd" fill="transparent" stroke-width="2" />
            <polyline class="g-short-line" points="240 10 140 10 140 90 0 90" fill="transparent" stroke-width="2" />
            <polyline class="g-shadow" points="240 10 140 10 140 90 0 90" fill="transparent" stroke-width="2" />
        </svg>
    </div>
    <!--  Gradient 实现线条动画 -->
    <div class="g-gradient"></div>
    <!--  Gradient 实现多段线条动画 -->
    <div class="g-mul-gradient"></div>
    <div class="g-main"></div>
</div>

Live

​x
 
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 199deg;
}
@property --angle2 {
  syntax: '<angle>';
  inherits: false;
  initial-value: 71deg;
}
​
body,
html {
    width: 100%;
    height: 100%;
    display: flex;
    background: #fff;
}
​
.g-container {
    position: relative;
    margin: auto;
    width: 200px;
    height: 100px;
​
    .g-main {
        position: relative;
        width: 200px;
        height: 100px;
        background: #666;
        z-index: 1;
    }
}
​
.g-svg {
    --color: orange;
    position: absolute;
    width: 240px;
    height: 100px;
    right: -240px;
    top: -50px;
​
    .g-short-line {
        --offset: 0;
        --offsetEnd: -320;
        stroke-dasharray: 40, 320;
        stroke-dashoffset: var(--offset);
        animation: move 2.4s infinite linear;
        stroke: var(--color);
        // filter: drop-shadow(0 0 5px #ff3d00);
    }
    .g-shadow {
        --offset: -30;
        --offsetEnd: -350;
        stroke-dasharray: 10, 320;
        stroke-dashoffset: var(--offset);
        animation: move 2.4s infinite linear;
        filter: drop-shadow(0 0 5px #ff3d00);
        stroke: var(--color);
    }
}
.g-mul-gradient {
    position: absolute;
    top: 100px;
    left: 60px;
    width: 200px;
    height: 100px;
​
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        mask: 
            linear-gradient(90deg, #000, #000 2px, transparent 2px, transparent),
            linear-gradient(360deg, #000, #000 2px, transparent 2px, transparent);
        background: 
            conic-gradient(from var(--angle2), transparent, #fc0, #ff5722 45deg, transparent 45deg),
            linear-gradient(#ddd, #ddd);
        animation: angleChange2 2.4s infinite ease-in-out
            
    }
    &::after {
        content: "";
        position: absolute;
        top: 100px;
        right: 0;
        width: 2px;
        height: 50px;
        background: 
            linear-gradient(#ff5722, #fc0),
            linear-gradient(#ddd, #ddd);
            background-repeat: no-repeat;
            background-size: 100% 100%, 100% 100%;
            background-position: 0 0, 0 0;
        animation: positionMove 2.4s linear infinite;
    }
}
.g-gradient {
    position: absolute;
    left: -200px;
    top: 50px;
    width: 200px;
    height: 100px;
    background: #ddd;
    mask: linear-gradient(#000, #000 2px, transparent 2px, transparent),
        linear-gradient(90deg, #000, #000 2px, transparent 2px, transparent);
    
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: conic-gradient(from var(--angle), transparent, #fc0, #ff5722 45deg, transparent 45deg);
        animation: angleChange 2.4s infinite ease-in-out;
    }
}
@keyframes move {
    0% {
        stroke-dashoffset: var(--offset);
    }
    100% {
        stroke-dashoffset: var(--offsetEnd);
    }
}
​
@keyframes angleChange {
    0% {
        --angle: 199deg;
    }
    100% {
        --angle: 420deg;
    }
}
​
​
@keyframes angleChange2 {
    0% {
        --angle2: 71deg;
    }
    100% {
        --angle2: 297deg;
    }
}
​
@keyframes positionMove {
    0% {
        background-size: 100% 100%, 100% 100%;
    }
    10%, 100% {
        background-size: 100% 0, 100% 100%;
    }
}

This Pen is owned by mafqla on CodePen. It is a fork of this Pen.

See more by @mafqla on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.