SM - Стильные решения для вашего сайта

Анимация Pill на CSS — эффект плавной трансформации

Анимация “Пилюля” — стильный эффект с CSS

Анимация “Пилюля” — стильный эффект с CSS

Хотите добавить стильный и запоминающийся эффект на свой сайт? Анимация “Пилюля” (Pill) — это элегантное решение, созданное с помощью CSS, которое придаст вашему интерфейсу динамичность и интерактивность.

Суть эффекта в том, что объект плавно меняет свою форму, переходя из одной стадии в другую, напоминая движение упругой капсулы или таблетки. Это может быть использовано для кнопок, индикаторов загрузки, всплывающих элементов и других интерактивных компонентов.

В статье мы разберем, как реализовать этот эффект с нуля, настроить параметры анимации и сделать так, чтобы она выглядела максимально естественно. Все просто, лаконично и современно!

Добавьте уникальности своему дизайну с помощью креативных анимаций!

See the Pen 💊 SVG Pill 💊 by CeramicSoda (@ceramicSoda) on CodePen.

        
HTML
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<use href="#pill_shadow" transform="scale(.9, .3) translate(32 1150)" />
<use href="#everything">
<animateTransform attributeName="transform" type="rotate" dur="4s" repeatCount="indefinite" calcMode="spline"
keyTimes="0;0.5;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1"
values="40 256 256; -40 256 256; 40 256 256" />
</use>
<defs>
  <g id="everything">
<use href="#pill_top" filter="url(#shadowTop)"/>
<use href="#pill_bottom_back"/>
<use href="#pill_bottom" filter="url(#shadowBottom)" stroke="#0d2b45" stroke-width="2"/>
<use href="#bubble1"/>
<use href="#bubble2"/>
<use href="#bubble3"/>
<use href="#bubble4"/>
<use href="#pill_outline" stroke="#0d2b45" stroke-width="10"/>
<use href="#pill_outline" stroke="#ffd4a3" stroke-width="6"/>
</g>
<path id="pill_outline" stroke-linejoin="round">
<animate attributeName="d" dur="2s" repeatCount="indefinite" calcMode="spline"
keyTimes="0;0.5;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1"
values="M198 152  C198 82 314 82 314 152  L314 358  C314 424 198 424 198 358 L198 152Z;
M198 162  C198 92 314 92 314 162  L314 348  C314 414 198 414 198 348 L198 162Z;
M198 152  C198 82 314 82 314 152  L314 358  C314 424 198 424 198 358 L198 152Z"/>
</path>
<g id="pill_shadow" filter="url(#labelClip)">
<use href="#pill_outline" fill="#8d697a80" y="128"> 
<animateTransform attributeName="transform" type="rotate" dur="4s" repeatCount="indefinite"
values="90 256 384; -270 256 384" additive="sum"/>
</use>
</g>
<path id="pill_bottom" fill="#8d697a">
<animate attributeName="d" dur="4s" repeatCount="indefinite" calcMode="linear"
keyTimes="0;0.25;0.5;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
values="M198 256  C198 256 314 256 314 256  L314 358  C314 420 198 420 198 358 L198 256Z;
M198 256  C198 226 314 226 314 256  L314 348  C314 420 198 420 198 348 L198 256Z;
M198 256  C198 256 314 256 314 256  L314 358  C314 420 198 420 198 358 L198 256Z;
M198 256  C198 286 314 286 314 256  L314 348  C314 420 198 420 198 348 L198 256Z;
M198 256  C198 256 314 256 314 256  L314 358  C314 420 198 420 198 358 L198 256Z"/>
</path>
<path id="pill_bottom_back" fill="#d08159">
<animate attributeName="d" dur="4s" repeatCount="indefinite" calcMode="linear"
keyTimes="0;0.25;0.5;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
values="M198 256  C198 256 314 256 314 256  L314 358  C314 414 198 414 198 358 L198 256Z;
M198 256  C198 286 314 286 314 256  L314 348  C314 414 198 414 198 348 L198 256Z;
M198 256  C198 256 314 256 314 256  L314 358  C314 414 198 414 198 358 L198 256Z;
M198 256  C198 226 314 226 314 256  L314 348  C314 414 198 414 198 348 L198 256Z;
M198 256  C198 256 314 256 314 256  L314 358  C314 414 198 414 198 358 L198 256Z;"/>
</path>
<circle id="bubble1" cy="180" r="4" fill="#d08159">
<animate attributeName="cx" dur="4s" repeatCount="indefinite" calcMode="spline"
keyTimes="0;0.5;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1"
values="216;266;216"/>
</circle>
<circle id="bubble2" cy="160" r="6" fill="#d08159">
<animate attributeName="cx" dur="4s" repeatCount="indefinite" calcMode="spline"
keyTimes="0;0.5;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1"
values="236;276;236"/>
</circle>
<circle id="bubble3" cy="140" r="10" fill="#d08159">
<animate attributeName="cx" dur="4s" repeatCount="indefinite" calcMode="spline"
keyTimes="0;0.5;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1"
values="226;276;226"/>
</circle>
<circle id="bubble4" cy="135" r="4" fill="#d08159">
<animate attributeName="cx" dur="4s" repeatCount="indefinite" calcMode="spline"
keyTimes="0;0.5;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1"
values="276;236;276"/>
</circle>
<path id="pill_top" fill="#ffaa5e" stroke-width="2">
<animate attributeName="d" dur="4s" repeatCount="indefinite" calcMode="linear"
keyTimes="0;0.25;0.5;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
values="M198 256  C198 256 314 256 314 256  L314 152  C314 82 198 82 198 152 L198 256Z;
M198 256  C198 226 314 226 314 256  L314 162  C314 92 198 92 198 162 L198 256Z;
M198 256  C198 256 314 256 314 256  L314 152  C314 82 198 82 198 152 L198 256Z;
M198 256  C198 286 314 286 314 256  L314 162  C314 92 198 92 198 162 L198 256Z;
M198 256  C198 256 314 256 314 256  L314 152  C314 82 198 82 198 152 L198 256Z;"/>
</path>
<filter id="shadowBottom">
<feOffset dx="-32" dy="-8"/>
<feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
<feFlood flood-color="#0d2b45" result="color"/>
<feComposite operator="in" in="color" in2="inverse" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
<filter id="shadowTop">
<feOffset dx="-32" dy="4"/>
  <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
  <feFlood flood-color="#d08159" result="color"/>
  <feComposite operator="in" in="color" in2="inverse" result="shadow"/>
  <feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
</svg>
        
CSS

body,html{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; 
}
body{
  background-color: #ffd4a3;
  display: flex;
  justify-content: center;
  align-items: center; 
}
svg{
  height: 80%;
  width: 80%;
}


svg-pill.zip
0 13.13 Kb
Нашли ошибку? Сообщите нам, мы исправим!
0 лайков 0 просмотров
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!

Сайт SATAMAX.RU