Популярные ответы с меткой

21 голос
Принятый

Как вырезать два небольших сегмента из окружности и вращать их при наведении курсора

Только HTML и CSS. Border-color и rotate псевдоэлемента Сразу оговорюсь, что SVG предлагает намного большие возможности, по части форм и анимации (что видно из соседних ответов). Правда, есть пара ...
UModeL's user avatar
  • 33.1k
17 голосов

Как вырезать два небольших сегмента из окружности и вращать их при наведении курсора

Рассчитаем длину окружности при заданном радиусе 20px C = 2 * 3.1415 * 20 = 125.66 Длина половины окружности равна 62,83 Если взять длину, вырезаемого сегмента равным 10px то формула stroke-dasharray ...
Alexandr_TT's user avatar
17 голосов

Колыбель Ньютона, анимация демонстрирующая этот эффект

Самый простой вариант на CSS: .newton_cradle { position: absolute; bottom: 20px; left: calc(50% - 150px); width: 275px; height: 160px; padding: 0 0 0 25px; border-top: 10px solid silver; ...
Sevastopol''s user avatar
  • 28.1k
16 голосов
Принятый

Анимация желе с SVG

Для анимации потребуется тег <animate/> в SVG: открываете свое изображение в векторном редакторе и изменяете его формы так, как вам нужно (главное не создавать больше никаких точек), берете из ...
Max Manchak's user avatar
16 голосов

Как создать эффект затвора камеры с помощью divs

Решение заключается в том, чтобы учесть тот факт, что у вас симметричная форма, поэтому вы можете построить ее, используя два разных элемента, где вы применяете одну и ту же вещь, а затем ...
Alexandr_TT's user avatar
16 голосов
Принятый

Анимация вращения логотипа с сохранением ориентации букв

Я бы сделал вот так: svg > g { animation: rot1 10s linear infinite; } svg text { animation: rot2 10s linear infinite; } @keyframes rot1 { from { transform: rotate(0)} to { ...
Stranger in the Q's user avatar
15 голосов

Как сделать вот такую рамку?

Не кнопка, а просто космос! Усаживаемся в кресле поудобнее, жмём волшебную кнопку и слушаем приятную мелодию Magic Fly, Space 1977 года, релаксируем и получаем удовольствие. Приятного отдыха! :) ...
Sevastopol''s user avatar
  • 28.1k
14 голосов
Принятый

SVG Анимация постепенного появления stroke-dasharray

Когда вы разбиваете круг на равные сегменты с помощью stroke-dasharray, то невозможно анимировать их появление с заполнением круга с помощью stroke-dashoffset Так как круг уже занят полностью. ...
Alexandr_TT's user avatar
14 голосов

Как сделать анимацию полёта дрона над городом

Для движения дрона по криволинейному пути необходимо получить криволинейный path Для этого загружаем изображение в векторный редактор и рисуем кривую: Начальную точку движения и конечную точку ...
Alexandr_TT's user avatar
14 голосов
Принятый

Анимация разрезания досок дисковой пилой

Пожалуй сделаю на CSS) body { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100vh; overflow: hidden; margin: 0; } .woods-area { display: ...
De.Minov's user avatar
  • 23.6k
13 голосов
Принятый

Как сделать адаптивное приложение без медиа запросов по макету дизайнера?

SVG решение У SVG решения есть ряд преимуществ: Кроссбраузерность, - работает во всех современных браузерах плюс IE11, Edge Полная адаптивность, - ваша вёрстка никогда не сломается при любом ...
Alexandr_TT's user avatar
13 голосов

Как создать эффект затвора камеры с помощью divs

Специально посмотрел видео, как устроена диафрагма. На HTML+CSS сделать реалистично намного сложнее чем на SVG. Вся сложность данного примера в подсчете координат конечной точки дуги, образующей ...
Stranger in the Q's user avatar
12 голосов
Принятый

Как создать эффект затвора камеры с помощью divs

Сниппет в этом ответе поддерживает разное количество створок диафрагмы. В основе этого решения лежит алгоритм нахождения точек пересечения двух окружностей let r = 80, arc = (x,y,s) => `...
Stranger in the Q's user avatar
12 голосов
Принятый

CSS шестиугольник с цветной вращающейся рамкой

Круг можно сделать так: html, body { background: black; height: 100%; margin: 0; display: flex; justify-content: center; align-items: center; overflow: hidden; } div { ...
Qwertiy's user avatar
  • 122k
12 голосов
Принятый

Как нарисовать объемную картинку линиями и анимировать её?

что то такое можно изобразить: document.body.innerHTML += ` <canvas id="c" width="600" height="600" /> <img src="https://picsum.photos/id/742/600/600" style="display:none" ...
Stranger in the Q's user avatar
11 голосов

Анимация желе с SVG

Используем анимации css для создания бесконечного анимированного желе: @keyframes jello { 11.1% { transform: none } 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg) } ...
Ver Nick's user avatar
  • 2,653
11 голосов

Как на SVG реализовать анимацию теней и z-index?

Анимация тени Анимация достигается изменением атрибута dx фильтра feOffset Команда на выполнение: <feOffset dy="3" dx="-14"> <animate attributeName="dx" values="-12;20;20;-12;...
Alexandr_TT's user avatar
11 голосов
Принятый

Как взаимодействуют между собой viewport и viewBox

Выше были примеры взаимодействия viewport и viewBox. А что происходит, когда в SVG документе есть только viewport, а viewBox не прописан? svg version="1.1" width="1280" height="1024" 1. ...
Alexandr_TT's user avatar
11 голосов

Как CSS лоадер преобразовать в SVG лоадер?

Фигуры будут иметь сложные контуры и поэтому, чтобы избежать непредсказуемого поведения при вращении элементов SVG, очень важно сразу позаботиться о чётком определении центра вращения. Работа в ...
Alexandr_TT's user avatar
11 голосов
Принятый

Как CSS лоадер преобразовать в SVG лоадер?

Дополнительные эффекты Анимация градиента кольца лоадера Будем анимировать атрибут линейного градиента stop-color <linearGradient id="gradl" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="...
Alexandr_TT's user avatar
11 голосов

Анимация диаграммы процесса дизайн-мышления

Движение кривых, показывающих процесс прохождения по этапам диаграммы Загружаем картинку в векторный редактор и с помощью инструмента - Рисовать кривые Безье, повторяем траекторию кривых. ...
Alexandr_TT's user avatar
11 голосов

Как сделать иллюзию того, что линия проходит в букву насквозь через отверстие, а не поверх нее

Сложный способ: Можно что-то подобное изобразить на канве, это конечно не буфер глубины, но подход в целом тот же. Тут еще необходимо поработать со смешиванием, для удаления черных пикселей рисуем ...
Stranger in the Q's user avatar
11 голосов
Принятый

Компьютерная геометрия - трансформация квадрата в одну прямую

Решение SVG Как комментировал @Stranger in the Q: Вот поочередно двигайте точки по окружности на 90 градусов вокруг точки, которая является предыдущей, сначала точку A вокруг D, потом A и D ...
Alexandr_TT's user avatar
11 голосов
Принятый

Как сделать анимацию вращения электронов вокруг ядра атома

Основу для svg элемента лучше делать в векторном редакторе. Для этого необходимы совсем минимальные навыки. Загружаете картинку в векторный редактор: <svg version="1.1" xmlns="http://www....
Alexandr_TT's user avatar
11 голосов
Принятый

Как сделать вот такую рамку?

body { background: #111; } .button { font-size: 15px; font-weight: 100; color: rgb(192, 189, 189); display: inline-block; text-align: center; position: relative; padding: ...
fixer's user avatar
  • 1,002
11 голосов
Принятый

Как сделать анимацию заливки текста двумя цветами

Как однажды @Stranger in the Q выразился: "Не в точности, но по мотивам®" =) Вариант на CSS Агрессивный вариант: h1 { margin: 0; padding: 0; text-transform: uppercase; font-weight: ...
Sevastopol''s user avatar
  • 28.1k
11 голосов

Анимация разрезания досок дисковой пилой

Нужно закодировать две половинки доски и одну разместить перед пилой, а вторую половинку доски поместить за пилой. Таким образом получается, что пила врезается в доску. При перемещении пилы за ней ...
Alexandr_TT's user avatar
11 голосов

Как реализовать прокрутку при движении шарика по траектории

Уверен, что есть более практичные методы на JavaScript. Но можно попробовать набор современных инструментов CSS. Я использовал offset-path, это путь, принимающий значения SVG-пути. Сгенерировать свой ...
focus.style's user avatar
11 голосов

Как лучше сверстать иконку facebook?

Можно использовать ваш вариант верстки иконки и даже сделать анимацию при наведении .facebook_logo { fill: #ffffff; display: inline-block; width: 11px; height: 20px; ...
Alexandr_TT's user avatar

Допускаются только превышающие минимальную длину ответы с наивысшим рейтингом, не являющиеся общими