Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen + (deprecated) Spinning anim | Deprecated
Test UI Features
course content

Kursinhalt

Test UI Features

Test UI Features

1. Buttons
2. ContentDev Tools
3. Image Tools
4. Links
5. Other
7. Tables
8. Developers

book
+ (deprecated) Spinning anim

html

index.html

copy

Вместо текста может быть видео или картинка.

Шаг 1:

Каждая картинка добавляется так:

python

Шаг 2:

Допустим у вас три картинки, нужно установить им задержку анимации чтобы они не стартовали с одной точки, если длительность анимации стоит на 30 секунд, то 30 / 3 (duration / n) получаем 10, выставляем с шагом в -10:

python

Шаг 3:

У каждой следующей картинки меняем id картинки, контейнера с текстом и контейнера в котором они оба. Плюс меняем начальный угол поворота для картинки и текста. Чтобы узнать какой ставить 360/кол-во картинок, в данном случае 120 градусов

Вторая картинка

python

Третья картинка Тут уже угол будет 240

python

Шаг: 4

Делаем так чтобы при наведении на контейнер с изображением оно становилось прозрачным

python

Выводим текст когда наводим мышкой на картинку

python

Кол-во этих блоков зависит от кол-ва картинок

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 9. Kapitel 21
We're sorry to hear that something went wrong. What happened?
some-alt