Kursinnehåll

Test UI Features

1. Buttons

Hint/Solution Buttons Hint/Solution/Video Tutorial Buttons Hint and Solution Single Block Buttons Code Description Button Download File in the TXT format Download Course Summary

2. ContentDev Tools

Markdown Parsing Colors RegExp Creation Item Feedbacks

3. Image Tools

Image Image Swiper

4. Links

Link in a Text Link to Github and CodeSandbox

5. Other

Windows / Apple / Linux Instructions NN Cat/Dog CNN Hyperparameters Encryption Block Text with Color Legend Danyas playground Oleh S tests

6. Text Boxes

7. Tables

Scrollable Framed Table Table with the Tooltip Matrices

8. Developers

Buttons Code Description Button Download File Button Image Magnifier / Image Magnifier + Carousel Note / Study more / Definition Code Block - Highlighted & Copyable Prerequisites Box With Links Table Expandable List Link in Markdown

9. Deprecated

+ (deprecated) Hint and Solution Single Block + (deprecated) TypeScript Hint/Solution + (deprecated) C# Hint/Solution + (deprecated) JavaScript Hint/Solution + (deprecated) Java Hint/Solution + (deprecated) GO Lang Hint/Solution + (deprecated) Python Hint/Solution + (deprecated) Java Hint/Solution with Copyable & Highlighted Code + (deprecated) Scala Hint/Solution with Copyable & Highlighted Code + (deprecated) Hint/Video Tutorial + (deprecated) Hint/Solution/Video Tutorial (deprecated) Interactive Video + (deprecated) Images Slider + (deprecated) Images Carousel + (deprecated) Image Magnifier + (deprecated) Image Carousel & Magnifier +(deprecated) Image Magnifying Glass + (deprecated) Linked List + (deprecated) IDE Testing + (deprecated) CSS Example Practice Test + (deprecated) Spinning anim + (deprecated) Temporary Hint/Video Tutorial + (deprecated) Temporary Hint/Solution/Video Tutorial + (deprecated) Joke + (deprecated) Animated border + (deprecated) Default Custom Table + (deprecated) Table Action + (deprecated) Styled Table

+ (deprecated) Spinning anim

index.html

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

Шаг 1:

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

python

Шаг 2:

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

python

Шаг 3:

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

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

python

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

python

Шаг: 4

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

python

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

python

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

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 9. Kapitel 21

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal