Animate электрокардиограф импульс линии застройки с границы и границы радиуса

Я получил последующий код:Animate электрокардиограф импульс линии застройки с границы и границы радиуса

.cWrapper { 
 
    display: flex; 
 
} 
 
.cLine { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid; 
 
} 
 
.cLine1 { 
 
    background-color: transparent; 
 
    border-color: transparent gray gray transparent; 
 
    border-bottom-right-radius: 20px; 
 
} 
 
.cLine2 { 
 
    width: 20px; 
 
    height: 150px; 
 
    background-color: transparent; 
 
    border-color: gray gray transparent transparent; 
 
    border-top-right-radius: 20px; 
 
} 
 
.cLine3 { 
 
    width: 20px; 
 
    height: 50px; 
 
    background-color: transparent; 
 
    border-color: transparent gray gray transparent; 
 
    border-bottom-right-radius: 20px; 
 
    align-self: flex-end; 
 
} 
 
.cLine4 { 
 
    width: 50px; 
 
    height: 100px; 
 
    background-color: transparent; 
 
    border-color: transparent transparent gray transparent; 
 
}

<div class="cWrapper"> 
 
    <canvas class="cLine cLine1"></canvas> 
 
    <canvas class="cLine cLine2"></canvas> 
 
    <canvas class="cLine cLine3"></canvas> 
 
    <canvas class="cLine cLine4"></canvas> 
 
</div>

Я попытался построить импульсную линию электрокардиограф с border и border-radius. Это сработало легко для меня (я должен немного придумать его, но на данный момент это хорошо для меня). Так что следующий стебель анимировать эти строки и сделать электрокардиограф пульс, как в этом примере:

На данный момент у меня нет идеи, как это сделать. Я попробовал это с jquery и animate(), а также с css3keyframes, но ничего не получилось. У кого-то есть идея, как это сделать? Благодарю.

источник

2016-10-13 MrBuggy

Я предлагаю сделать в сценарии JS, который переместит div с холстом и сделает еще один черный div, на половине экрана, который будет статичным и будет закрыт правую половину экрана. –

@ MaciejWójcik Итак, вы делаете пример с этой идеей? Или это просто предложение для меня попробовать? Cheers – MrBuggy

Могу привести пример, но позже. Теперь это только идея. Напиши мне, если ты не можешь это сделать, тогда я пытаюсь сделать пример. –

Я разрабатываю программные решения для медицинского обслуживания, и мне нужен собственный индикатор загрузки, когда мне приходится ждать каких-либо данных и т. Д. Поэтому я решил сделать анимацию импульсов экю-импульса, чтобы оставаться на тему программного обеспечения. После этого я увидел индикатор загрузки в windows 8, который работает как этот:

После этого у меня была идея, чтобы работать и с такой анимацией (кружочки после каждого), потому что это, как известно, стандарты на современных веб-решениях. Поэтому я попытался сделать несколько кружков, следующих друг за другом, но в форме линии импульсов ecg. Он отлично работает и выглядит довольно красиво. Я использовал css3 keyframes. Теперь это выглядит следующим образом:

.cWrapper { 
 
    width: 200px; 
 
    height: 300px; 
 
    background-color: transparent; 
 
    position: relative; 
 
    display: flex; 
 
    justify-content: flex-start; 
 
} 
 
.cPoint { 
 
    width: 10px; 
 
    height: 10px; 
 
    border-radius: 10px; 
 
    background-color: black; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 50px; 
 
    -webkit-animation-name: pulse; 
 
    /* Chrome, Safari, Opera */ 
 
    -webkit-animation-duration: 2.0s; 
 
    /* Chrome, Safari, Opera */ 
 
    -webkit-animation-timing-function: linear; 
 
    -webkit-animation-iteration-count: infinite; 
 
    animation-name: pulse; 
 
    animation-duration: 2.0s; 
 
    animation-timing-function: linear; 
 
    animation-iteration-count: infinite; 
 
} 
 
.p1 { 
 
    -webkit-animation-delay: 0s; 
 
    animation-delay: 0s; 
 
} 
 
.p2 { 
 
    -webkit-animation-delay: 0.2s; 
 
    animation-delay: 0.2s; 
 
} 
 
.p3 { 
 
    -webkit-animation-delay: 0.4s; 
 
    animation-delay: 0.4s; 
 
} 
 
.p4 { 
 
    -webkit-animation-delay: 0.6s; 
 
    animation-delay: 0.6s; 
 
} 
 
.p5 { 
 
    -webkit-animation-delay: 0.8s; 
 
    animation-delay: 0.8s; 
 
} 
 
@-webkit-keyframes pulse { 
 
    0%: { 
 
    left: 0px; 
 
    top: 50px; 
 
    } 
 
    30% { 
 
    left: 50px; 
 
    top: 50px; 
 
    } 
 
    40% { 
 
    left: 70px; 
 
    top: 0px; 
 
    } 
 
    60% { 
 
    left: 90px; 
 
    top: 100px 
 
    } 
 
    70% { 
 
    left: 110px; 
 
    top: 50px; 
 
    } 
 
    100% { 
 
    left: 160px; 
 
    top: 50px; 
 
    } 
 
} 
 
@keyframes pulse { 
 
    0%: { 
 
    left: 0px; 
 
    top: 50px; 
 
    } 
 
    30% { 
 
    left: 50px; 
 
    top: 50px; 
 
    } 
 
    40% { 
 
    left: 70px; 
 
    top: 0px; 
 
    } 
 
    60% { 
 
    left: 90px; 
 
    top: 100px 
 
    } 
 
    70% { 
 
    left: 110px; 
 
    top: 50px; 
 
    } 
 
    100% { 
 
    left: 160px; 
 
    top: 50px; 
 
    } 
 
}

<div class="cWrapper"> 
 
    <div class="cPoint p1"></div> 
 
    <div class="cPoint p2"></div> 
 
    <div class="cPoint p3"></div> 
 
    <div class="cPoint p4"></div> 
 
    <div class="cPoint p5"></div> 
 
</div>

Так это решить мои требования. Благодарю.

источник

2016-10-13 10:57:31 MrBuggy

отлично! вы сами решили свой вопрос. стоит upvote. –

@LearnHowToBeTransparent Да, это здорово, спасибо! Приветствия. – MrBuggy

Animate электрокардиограф импульс линии застройки с границы и границы радиуса

ответ

Смежные вопросы