Heart monitor

by edgardleal

HTML

<div class="block">
    <div class="line">
        <div class="ball"></div>
    </div>
    <div class="eclipse layer"></div>
    <div class="eclipse2 layer"></div>
</div>

CSS

body {
    background-color: black;
}
hr {
    clear: both;
}
.line {
    background-color: #FF5555;
    top: 49px;
    left:0;
    position: relative;
    height: 1px;
    box-shadow: 0 0 2px 2px red;
}
.eclipse {
    animation-name: eclipsea;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    left: -100px;
    height: 100px;
    width: 60px;
    background-color: black;
    box-shadow: 20px 10px 45px 8px black;
}
.eclipse2{
    animation-name: eclipse2;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    left: 3px;
    height: 100px;
    width: 100px;
    background-color: black;
}

.layer{
    float: left;
    position: absolute;
    top: 0px;
}
.ball {
    animation-name: ball1;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    position: relative;
    width: 3px;
    height: 3px;
    border-radius: 3px;
    background-color: white;
    top: -1px;
    left: 4px;
    box-shadow: 0px 0px 3px 5px red;
}
@keyframes eclipsea {
    from {
        left: -130px;
    }
    to {
        left: -30px;
    }
}
@keyframes eclipse2 {
    from {
        left: 16px;
    }
    to {
        left: 116px;
    }
}


@keyframes ball1 {
    from {
        left: 0px;
    }
    to {
        left: 100px;
    }
}
.block {
    width: 100px;
    height: 100px;
    float: left;
    border: 1px solid #000;
}