21
голос
Принятый
Как вырезать два небольших сегмента из окружности и вращать их при наведении курсора
Только HTML и CSS. Border-color и rotate псевдоэлемента
Сразу оговорюсь, что SVG предлагает намного большие возможности, по части форм и анимации (что видно из соседних ответов). Правда, есть пара ...
17
голосов
Как вырезать два небольших сегмента из окружности и вращать их при наведении курсора
Рассчитаем длину окружности при заданном радиусе 20px
C = 2 * 3.1415 * 20 = 125.66
Длина половины окружности равна 62,83 Если взять длину, вырезаемого сегмента равным 10px то формула stroke-dasharray ...
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; ...
16
голосов
Принятый
Анимация желе с SVG
Для анимации потребуется тег <animate/> в SVG:
открываете свое изображение в векторном редакторе и изменяете его формы так, как вам нужно (главное не создавать больше никаких точек), берете из ...
16
голосов
Как создать эффект затвора камеры с помощью divs
Решение заключается в том, чтобы учесть тот факт, что у вас
симметричная форма, поэтому вы можете построить ее, используя два
разных элемента, где вы применяете одну и ту же вещь, а затем
...
16
голосов
Принятый
Анимация вращения логотипа с сохранением ориентации букв
Я бы сделал вот так:
svg > g {
animation: rot1 10s linear infinite;
}
svg text {
animation: rot2 10s linear infinite;
}
@keyframes rot1 {
from { transform: rotate(0)}
to { ...
15
голосов
Как сделать вот такую рамку?
Не кнопка, а просто космос!
Усаживаемся в кресле поудобнее, жмём волшебную кнопку и слушаем приятную мелодию Magic Fly, Space 1977 года, релаксируем и получаем удовольствие. Приятного отдыха! :)
...
14
голосов
Принятый
SVG Анимация постепенного появления stroke-dasharray
Когда вы разбиваете круг на равные сегменты с помощью stroke-dasharray, то невозможно
анимировать их появление с заполнением круга с помощью stroke-dashoffset
Так как круг уже занят полностью. ...
14
голосов
Как сделать анимацию полёта дрона над городом
Для движения дрона по криволинейному пути необходимо получить криволинейный path
Для этого загружаем изображение в векторный редактор и рисуем кривую:
Начальную точку движения и конечную точку ...
14
голосов
Принятый
Анимация разрезания досок дисковой пилой
Пожалуй сделаю на CSS)
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
overflow: hidden;
margin: 0;
}
.woods-area {
display: ...
13
голосов
Принятый
Как сделать адаптивное приложение без медиа запросов по макету дизайнера?
SVG решение
У SVG решения есть ряд преимуществ:
Кроссбраузерность, - работает во всех современных браузерах плюс IE11, Edge
Полная адаптивность, - ваша вёрстка никогда не сломается при любом ...
13
голосов
Как создать эффект затвора камеры с помощью divs
Специально посмотрел видео, как устроена диафрагма.
На HTML+CSS сделать реалистично намного сложнее чем на SVG.
Вся сложность данного примера в подсчете координат конечной точки дуги, образующей ...
12
голосов
Принятый
Как создать эффект затвора камеры с помощью divs
Сниппет в этом ответе поддерживает разное количество створок диафрагмы.
В основе этого решения лежит алгоритм нахождения точек пересечения двух окружностей
let r = 80,
arc = (x,y,s) => `...
12
голосов
Принятый
CSS шестиугольник с цветной вращающейся рамкой
Круг можно сделать так:
html, body {
background: black;
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
div {
...
12
голосов
Принятый
Как нарисовать объемную картинку линиями и анимировать её?
что то такое можно изобразить:
document.body.innerHTML += `
<canvas id="c" width="600" height="600" />
<img src="https://picsum.photos/id/742/600/600"
style="display:none" ...
11
голосов
Анимация желе с SVG
Используем анимации css для создания бесконечного анимированного желе:
@keyframes jello {
11.1% {
transform: none
}
22.2% {
transform: skewX(-12.5deg) skewY(-12.5deg)
}
...
11
голосов
Как на SVG реализовать анимацию теней и z-index?
Анимация тени
Анимация достигается изменением атрибута dx фильтра feOffset
Команда на выполнение:
<feOffset dy="3" dx="-14">
<animate attributeName="dx" values="-12;20;20;-12;...
11
голосов
Принятый
Как взаимодействуют между собой viewport и viewBox
Выше были примеры взаимодействия viewport и viewBox.
А что происходит, когда в SVG документе есть только viewport, а viewBox не прописан?
svg version="1.1" width="1280" height="1024"
1. ...
11
голосов
Как CSS лоадер преобразовать в SVG лоадер?
Фигуры будут иметь сложные контуры и поэтому, чтобы избежать непредсказуемого поведения при вращении элементов SVG, очень важно сразу позаботиться о чётком определении центра вращения.
Работа в ...
11
голосов
Принятый
Как CSS лоадер преобразовать в SVG лоадер?
Дополнительные эффекты
Анимация градиента кольца лоадера
Будем анимировать атрибут линейного градиента stop-color
<linearGradient id="gradl" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="...
11
голосов
Анимация диаграммы процесса дизайн-мышления
Движение кривых, показывающих процесс прохождения по этапам диаграммы
Загружаем картинку в векторный редактор и с помощью инструмента - Рисовать кривые Безье, повторяем траекторию кривых.
...
11
голосов
Как сделать иллюзию того, что линия проходит в букву насквозь через отверстие, а не поверх нее
Сложный способ:
Можно что-то подобное изобразить на канве, это конечно не буфер глубины, но подход в целом тот же. Тут еще необходимо поработать со смешиванием, для удаления черных пикселей
рисуем ...
11
голосов
Принятый
Компьютерная геометрия - трансформация квадрата в одну прямую
Решение SVG
Как комментировал @Stranger in the Q:
Вот поочередно двигайте точки по окружности на 90 градусов вокруг
точки, которая является предыдущей, сначала точку A вокруг D, потом A и
D ...
11
голосов
Принятый
Как сделать анимацию вращения электронов вокруг ядра атома
Основу для svg элемента лучше делать в векторном редакторе. Для этого необходимы совсем минимальные навыки.
Загружаете картинку в векторный редактор:
<svg version="1.1" xmlns="http://www....
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: ...
11
голосов
Принятый
Как сделать анимацию заливки текста двумя цветами
Как однажды @Stranger in the Q выразился: "Не в точности, но по мотивам®" =)
Вариант на CSS
Агрессивный вариант:
h1 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-weight: ...
11
голосов
Анимация разрезания досок дисковой пилой
Нужно закодировать две половинки доски и одну разместить перед пилой, а вторую половинку доски поместить за пилой. Таким образом получается, что пила врезается в доску.
При перемещении пилы за ней ...
11
голосов
Как реализовать прокрутку при движении шарика по траектории
Уверен, что есть более практичные методы на JavaScript. Но можно попробовать набор современных инструментов CSS.
Я использовал offset-path, это путь, принимающий значения SVG-пути. Сгенерировать свой ...
11
голосов
Как лучше сверстать иконку facebook?
Можно использовать ваш вариант верстки иконки и даже сделать анимацию при наведении
.facebook_logo {
fill: #ffffff;
display: inline-block;
width: 11px;
height: 20px;
...
Допускаются только превышающие минимальную длину ответы с наивысшим рейтингом, не являющиеся общими
Связанные метки
svg-animation × 326svg × 316
css × 189
css-animation × 120
javascript × 107
html × 101
анимация × 55
css3 × 39
html5 × 38
вёрстка × 32
jquery × 20
smil × 12
inkscape × 6
clip-path × 5
svg-filter × 5
canvas × 4
gsap × 3
anime.js × 3
firefox × 2
webgl × 2
animate × 2
градиент × 2
snapsvg × 2
svg-morphing × 2
android × 1