How to create a DNA structure using html
CSS
that at the same time is in motion, like the following image:
but using HTML CSS and if necessary jQuery and this vertical mind structure?
I have the following código
html but it would be a bit more similar to the img
z-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.grey {
background: #cccccc;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #fff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.green {
background: #5EA226;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.blue {
background: #5178D0;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.pink {
background: #EF0BD8;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
<body >
<h1><span class="blue">1</span><span>_____________ </span><span class="pink">1</span></h1>
<h1><span class="blue">2</span><span>_____________ </span><span class="pink">2</span></h1>
<h1><span class="blue">3</span><span>_____________ </span><span class="pink">3</span></h1>
<h1><span class="blue">4</span><span>_____________ </span><span class="pink">4</span></h1>
<h1><span class="blue">4</span><span>_____________ </span><span class="pink">5</span></h1>
<h1><span class="blue">6</span><span>_____________ </span><span class="pink">6</span></h1>
<h1><span class="blue">7</span><span>_____________ </span><span class="pink">7</span></h1>
<h1><span class="blue">8</span><span>_____________ </span><span class="pink">8</span></h1>
<h1><span class="blue">9</span><span>_____________ </span><span class="pink">9</span></h1>
</body>