<div id="description">
<h2>Ефект пульсації</h2>
<p>Елемент, який постійно змінює свій розмір з ефектом пульсації.</p>
</div>
<div id="result">
<div class="pulse"></div>
</div>
/* Загальні стилі */
body {
background-color: #f1f1f1;
}
#description {
text-align: center;
margin-bottom: 20px;
}
h2 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #333;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
color: #777;
}
#result {
padding-top: 50px;
display: flex;
justify-content: center;
}
/* Анімація пульсації */
@keyframes pulse {
0% {
transform: scale(1);
background-color: #ff6384;
}
50% {
transform: scale(1.5);
background-color: #42a5f5;
}
100% {
transform: scale(1);
background-color: #ff6384;
}
}
.pulse {
width: 100px;
height: 100px;
animation: pulse 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) infinite;
border-radius: 50%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.