JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="parent">
  <div class="text" data-text="глобусни, что-бы открыть"></div>
  <div class="child"></div>
</div>

SCSS

body {
  background: url(http://wallpoper.com/images/00/38/64/70/orange-gaussian_00386470.jpg);
  padding: 50px;
}
.parent {
  position: relative;
  width: 350px;
  height: 50px;
  border: 2px dotted #fff;
  border-radius: 28px;
}

.child {
  position: absolute;
  top: 2px; left: 3px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: red;
}

.text {
  position: absolute;
  top: 15px;
  left: 5%;
  width: 90%;
  text-align: center;
  font-family: tahoma;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px;
  color: #fff;
}

.text span {
  color: #666;
  animation: key-color-play 2.8s linear 2s infinite;
}
  
@keyframes key-color-play {
	0%, 30% { color: #666; }
	15% { color: #fff; }
}

JavaScript

var $target = $('.text');





var lettersArray = $target.attr('data-text').split('');
var template = '';
$.each(lettersArray,function(i,e){
	var delay = ((i+1) * .07).toFixed(2);
	template+='<span style="animation-delay:'+delay+'s;-webkit-animation-delay:'+delay+'s">'+e+'</span>';
});
$target.html(template);