Мобильная версияВот индексная страница. Он представляет четыре изображения, каждое из которых затемняется и заменяется другим, всего 12 изображений. И он отлично работает в Windows с монитором компьютера.
Как динамически изменить его размер для мобильного телефона?
.центр { поле слева: авто; поле справа: авто; } таблица {border-collapse: отдельный; расстояние между границами: 10 пикселей 20 пикселей;} стол, таблица тд;} .центр { поле слева: авто; поле справа: авто; } @keyframes Rotateimgs { 0% { непрозрачность: 0; } 33,33% { непрозрачность: 1; } 66,66% { непрозрачность: 0; } 100% { непрозрачность: 0; } } тд { положение: относительное; --interval: 5s;/* установите желаемое время появления */ } img.fadeinout { позиция: абсолютная; верх: 0; слева: 0; имя-анимации: Rotaimgs; анимация-длительность: Calc(var(--interval) * 3); количество итераций анимации: бесконечно; непрозрачность: 0; } img.fadeinout:nth-child(1) { задержка анимации: 0 с; позиция: относительная;/* если ваши изображения разного размера, поместите это самое высокое */ } img.fadeinout:nth-child(2) { задержка анимации: var (--интервал); } img.fadeinout:nth-child(3) { анимация-задержка: Calc(var(--interval) * 2); }
Любая помощь приветствуется.
