<div id="e1">1</div>
<div id="e2">22</div>
<div id="e3">333</div>
<div id="e4">4444</div>
<div id="e5">55555</div>
#e1, #e2, #e3, #e4, #e5 {
position: absolute;
top: 0;
left: 0;
animation: change 1250ms infinite steps(1);
}
#e2 { animation-delay: -1000ms; }
#e3 { animation-delay: -750ms; }
#e4 { animation-delay: -500ms; }
#e5 { animation-delay: -250ms; }
@keyframes change {
0%, 20% {
opacity: 1;
}
20%, 100% {
opacity: 0;
}
}
$('body').html(Array.from({ length: 4 }, (n, i) => `
<svg width="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="border" cx="20" cy="20" r="18"/>
<circle class="fill" cx="20" cy="20" r="18"/>
<text x="12" y="25" class="small">0${i + 1}</text>
</svg>
`));
const $elements = $('.fill');
function animateElem(index) {
$elements.removeClass('animation').eq(index).addClass('animation');
}
$(document).on('animationend', function(e) {
$(e.target).removeClass('animation');
const index = (1 + $elements.index(e.target)) % $elements.length;
animateElem(index);
});
$(document).on('click', 'svg', function(e) {
animateElem($elements.index($('.fill', this)));
});
.border {
fill: transparent;
stroke: #ccc;
stroke-width: 2px;
}
.fill {
fill: transparent;
stroke: #000;
stroke-width: 2px;
stroke-dasharray: 120;
stroke-dashoffset: 120;
transform: rotate(-90deg);
transform-origin: center;
}
.animation {
animation: spin 2s both linear;
}
@keyframes spin {
to {
stroke-dashoffset: 1;
}
}
В чем ошибка?
<div class="1">
transition
, добавить анимацию: animation: show 10s;
.@keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
нужно вращать сначала медленно, потом быстро, потом опять медленно
:hover
и самой кнопке тоже:.btn:hover {
display: block;
}
<div class="container">
<div class="yellow"></div>
<textarea></textarea>
</div>
.container {
display: inline-flex;
width: 200px;
height: 400px;
flex-direction: column;
border: 10px solid red;
}
.yellow {
background: yellow;
flex-grow: 1;
}
textarea {
background: #47f;
line-height: 20px;
resize: none;
}
const textarea = document.querySelector('textarea');
textarea.addEventListener('input', function() {
const maxHeight = 300;
const height = 20 * this.value.split('\n').length;
this.style.height = `${Math.min(height, maxHeight)}px`;
});
textarea.dispatchEvent(new Event('input'));
В качестве ширины флекс-контейнера (570px) задаю сумму ширин флекс-элементов (390px + 180px).
margin: 0 auto
элементу .subscribe-form
, например. <div id="progressBar"></div>
<button>green</button>
<button>red</button>
<button>yellow</button>
<button>magenta</button>
<button>aqua</button>
let percent = 0;
const gradientParts = [];
$('button').click(function() {
if (percent < 100) {
const color = $(this).text();
percent++;
gradientParts.push(`${color} ${percent - 1}%`, `${color} ${percent}%`);
const gradient = gradientParts.concat(`#435C91 ${percent}%`, '#435C91 100%');
$('#progressBar').css({
background: `linear-gradient(to right, ${gradient.join(', ')})`,
});
}
});