Как сделать движущуюся картинку в html

Бегущая строка в HTML

Таким же образом в HTML может перемещаться изображение:

В XHTML, как и в HTML 5, бегущая строка запрещена, точнее запрещены теги да и с дизайнерской точки зрения бегущая строка — это вчерашний день. Но! Предположим, что вы все-таки решили разместить у себя на сайте или на отдельной его странице бегущую строчку, тогда используйте для такой страницы структуру документа HTML 4.01.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

HTML код iframe Бегущая строка в HTML HTML теги формы

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Бегущая строка в HTML? – Не вопрос!

Вращение картинки по кругу на css

Как заставить её вращаться по кругу на одном месте по часовой стрелке — в положении 180 градусов смайл становится перевернутым) желательно на css ?

Отслеживать
110k 23 23 золотых знака 113 113 серебряных знаков 377 377 бронзовых знаков
задан 29 июн 2016 в 10:16
4,488 6 6 золотых знаков 38 38 серебряных знаков 93 93 бронзовых знака
что значит вращаться по кругу?
29 июн 2016 в 10:17
@Grundy по часовой стрелке переворачиваться
29 июн 2016 в 10:19
на одном месте? просто крутиться?
29 июн 2016 в 10:20
@Grundy да все правильно как колесо на одном месте
29 июн 2016 в 10:21

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

img.rot < animation: 1s linear 0s normal none infinite running rot; -webkit-animation: 1s linear 0s normal none infinite running rot; width: 100px; >@keyframes rot < 0% < transform: rotate(0deg); >100% < transform: rotate(360deg); >> @-webkit-keyframes rot < 0% < transform: rotate(0deg); >100% < transform: rotate(360deg); >>

Анимация по шагам))

Отслеживать
ответ дан 29 июн 2016 в 10:22
Jean-Claude Jean-Claude
5,841 2 2 золотых знака 19 19 серебряных знаков 45 45 бронзовых знаков
да, вот так! супер! спасибо
29 июн 2016 в 10:23
именно так и устроена анимация у font-awesome
25 июл 2016 в 9:43

Подскажите , тут картинка крутиться слева направо , а как сделать наоборот ? что бы изображение крутилось справа налево ?

21 янв 2020 в 15:59
@ArnoldжеFree поменять местами 0 и 360
21 янв 2020 в 16:06

Можно воспользоваться свойством animation

Которому можно задать анимацию, описанную в @keyframes, а так же настройки анимации: продолжительной одной итерации, задержка перед запуском, количество повторений и т.д.

@keyframes spin < from to > img

Отслеживать
ответ дан 29 июн 2016 в 10:26
81k 9 9 золотых знаков 78 78 серебряных знаков 135 135 бронзовых знаков
спасибо! единственное, что @Jean-Claude написал первым
29 июн 2016 в 10:35
@Вася, ага, я долго описание смотрел 🙂 поэтому добавил его, чтобы было где дальше смотреть
29 июн 2016 в 10:36

Анимация вращения при наведении курсора

img < border-radius: 50%; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; >img:hover

Отслеживать
ответ дан 11 янв 2021 в 19:53
Alexandr_TT Alexandr_TT
110k 23 23 золотых знака 113 113 серебряных знаков 377 377 бронзовых знаков

• html
• css
• jquery
• css3
• анимация

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.8.3130

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Вставка анимации на сайт HTML

Анимированные изображения являются более привлекательными для пользователей. Именно на них в первую очередь обращают внимание посетители сайта.
Наиболее распространёнными форматами анимации, встраиваемыми в сайты являются GIF и SWF. GIF — наиболее простой в создании формат анимации, SWF, в свою очередь, является более сложным, но при этом более функциональным.

Для начала рассмотрим, как вставить анимацию на сайт HTML на примере GIF:

• Создайте GIF-анимацию при помощи специализированных программ, либо других графических редакторов, поддерживающих данную функцию, или скачайте готовую анимацию из любого банка изображений.
• Загрузите готовый файл в необходимую директорию.
• Откройте нужную страницу вашего сайта и найдите в коде место, куда собираетесь вставить баннер.
• Используйте HTML-код аналогичный коду для вставки изображений:

Далее рассмотрим вставку Flash-анимации в HTML.

Существуют два основных метода вставки Flash-контента в HTML-страницу.

• При помощи тега — более ранний и гибкий в настройке элемент, позволяющий задать больше параметров для вставки благодаря большому количеству поддерживаемых атрибутов.
• При помощи тега — более новый элемент, получивший официальную поддержку лишь с приходом стандарта HTML 5. Является более простым способом и подходит только для страниц, написанных согласно новым спецификациям. Имеет меньше параметров для настройки.

Рассмотрим, как вставить флеш в HTML на примере вставки баннера.

• Создайте Flash-ролик и сохраните его в формате .swf.
• 2 и 3 пункты аналогичны вставке GIF-анимации.
• Вставьте в код страницы код блока с flash-контентом при помощи тегов , либо и их атрибутов, указывающих адрес, тип, размеры вставляемого объекта.

Похожие статьи

Как сделать HTML-форму

Как вставить музыку в HTML страницу

Как вставить видео в HTML

Остались вопросы?

Москва, Певческий переулок, 4 стр. 1

© London Advertising 2012-2024

Задать вопрос

Оставьте свои контактные данные и мы ответим на ваш вопрос

Политика конфидециальности

Общие положения.

Настоящая политика обработки персональных данных составлена в соответствии с требованиями Федерального закона от 27.07.2006. №152-ФЗ «О персональных данных» и определяет порядок обработки персональных данных и меры по обеспечению безопасности персональных данных ИП Бабийчук Кирилл Руслланович (далее – Оператор). Оператор ставит своей важнейшей целью и условием осуществления своей деятельности соблюдение прав и свобод человека и гражданина при обработке его персональных данных, в том числе защиты прав на неприкосновенность частной жизни, личную и семейную тайну.

Настоящая политика Оператора в отношении обработки персональных данных (далее – Политика) применяется ко всей информации, которую Оператор может получить о посетителях веб-сайта https://london-adv.ru.

1. Основные понятия, используемые в Политике
   Автоматизированная обработка персональных данных – обработка персональных данных с помощью средств вычислительной техники;
   Блокирование персональных данных – временное прекращение обработки персональных данных (за исключением случаев, если обработка необходима для уточнения персональных данных);
   Веб-сайт – совокупность графических и информационных материалов, а также программ для ЭВМ и баз данных, обеспечивающих их доступность в сети интернет по сетевому адресу https://london-adv.ru;
   Информационная система персональных данных — совокупность содержащихся в базах данных персональных данных, и обеспечивающих их обработку информационных технологий и технических средств;
   Обезличивание персональных данных — действия, в результате которых невозможно определить без использования дополнительной информации принадлежность персональных данных конкретному Пользователю или иному субъекту персональных данных;
   Обработка персональных данных – любое действие (операция) или совокупность действий (операций), совершаемых с использованием средств автоматизации или без использования таких средств с персональными данными, включая сбор, запись, систематизацию, накопление, хранение, уточнение (обновление, изменение), извлечение, использование, передачу (распространение, предоставление, доступ), обезличивание, блокирование, удаление, уничтожение персональных данных;
   Оператор – государственный орган, муниципальный орган, юридическое или физическое лицо, самостоятельно или совместно с другими лицами организующие и (или) осуществляющие обработку персональных данных, а также определяющие цели обработки персональных данных, состав персональных данных, подлежащих обработке, действия (операции), совершаемые с персональными данными;
   Персональные данные – любая информация, относящаяся прямо или косвенно к определенному или определяемому Пользователю веб-сайта https://london-adv.ru; Пользователь – любой посетитель веб-сайта https://london-adv.ru; Предоставление персональных данных – действия, направленные на раскрытие персональных данных определенному лицу или определенному кругу лиц; Распространение персональных данных – любые действия, направленные на раскрытие персональных данных неопределенному кругу лиц (передача персональных данных) или на ознакомление с персональными данными неограниченного круга лиц, в том числе обнародование персональных данных в средствах массовой информации, размещение в информационно-телекоммуникационных сетях или предоставление доступа к персональным данным каким-либо иным способом;
   Трансграничная передача персональных данных – передача персональных данных на территорию иностранного государства органу власти иностранного государства, иностранному физическому или иностранному юридическому лицу;
   Уничтожение персональных данных – любые действия, в результате которых персональные данные уничтожаются безвозвратно с невозможностью дальнейшего восстановления содержания персональных данных в информационной системе персональных данных и (или) результате которых уничтожаются материальные носители персональных данных.
2. Оператор может обрабатывать следующие персональные данные Пользователя Фамилия, имя, отчество;
   Электронный адрес;
   Номера телефонов;
   Также на сайте происходит сбор и обработка обезличенных данных о посетителях (в т.ч. файлов «cookie») с помощью сервисов интернет-статистики (Яндекс Метрика и Гугл Аналитика и других).
   Вышеперечисленные данные далее по тексту Политики объединены общим понятием Персональные данные.
3. Цели обработки персональных данных Цель обработки персональных данных Пользователя — информирование Пользователя посредством отправки электронных писем.
   Также Оператор имеет право направлять Пользователю уведомления о новых продуктах и услугах, специальных предложениях и различных событиях. Пользователь всегда может отказаться от получения информационных сообщений, направив Оператору письмо на адрес электронной почты info@london-adv.ru с пометкой «Отказ от уведомлениях о новых продуктах и услугах и специальных предложениях». Обезличенные данные Пользователей, собираемые с помощью сервисов интернет-статистики, служат для сбора информации о действиях Пользователей на сайте, улучшения качества сайта и его содержания.
4. Правовые основания обработки персональных данных Оператор обрабатывает персональные данные Пользователя только в случае их заполнения и/или отправки Пользователем самостоятельно через специальные формы, расположенные на сайте https://london-adv.ru. Заполняя соответствующие формы и/или отправляя свои персональные данные Оператору, Пользователь выражает свое согласие с данной Политикой.
   Оператор обрабатывает обезличенные данные о Пользователе в случае, если это разрешено в настройках браузера Пользователя (включено сохранение файлов «cookie» и использование технологии JavaScript).
5. Порядок сбора, хранения, передачи и других видов обработки персональных данных Безопасность персональных данных, которые обрабатываются Оператором, обеспечивается путем реализации правовых, организационных и технических мер, необходимых для выполнения в полном объеме требований действующего законодательства в области защиты персональных данных.
   Оператор обеспечивает сохранность персональных данных и принимает все возможные меры, исключающие доступ к персональным данным неуполномоченных лиц. Персональные данные Пользователя никогда, ни при каких условиях не будут переданы третьим лицам, за исключением случаев, связанных с исполнением действующего законодательства.
   В случае выявления неточностей в персональных данных, Пользователь может актуализировать их самостоятельно, путем направления Оператору уведомление на адрес электронной почты Оператора info@london-adv.ru с пометкой «Актуализация персональных данных».
   Срок обработки персональных данных является неограниченным. Пользователь может в любой момент отозвать свое согласие на обработку персональных данных, направив Оператору уведомление посредством электронной почты на электронный адрес Оператора info@london-adv.ru с пометкой «Отзыв согласия на обработку персональных данных».
6. Трансграничная передача персональных данных
   Оператор до начала осуществления трансграничной передачи персональных данных обязан убедиться в том, что иностранным государством, на территорию которого предполагается осуществлять передачу персональных данных, обеспечивается надежная защита прав субъектов персональных данных.
   Трансграничная передача персональных данных на территории иностранных государств, не отвечающих вышеуказанным требованиям, может осуществляться только в случае наличия согласия в письменной форме субъекта персональных данных на трансграничную передачу его персональных данных и/или исполнения договора, стороной которого является субъект персональных данных.
7. Заключительные положения
   Пользователь может получить любые разъяснения по интересующим вопросам, касающимся обработки его персональных данных, обратившись к Оператору с помощью электронной почты info@london-adv.ru. В данном документе будут отражены любые изменения политики обработки персональных данных Оператором. Политика действует бессрочно до замены ее новой версией. Актуальная версия Политики в свободном доступе расположена в сети Интернет по адресу https://london-adv.ru.

Мини-туториал по анимации в CSS и HTML5

Рассказываем, как сделать анимацию без использования JavaScript. Пишем страницу авторизации пользователя на CSS и HTML5.

За годы работы с Front End технологиями мне приходилось работать с разными способами анимации. В этой статье я хочу подробнее разобрать, как работает анимация в CSS без использования JavaScript.

В CSS есть свойство animation, которое позволяет анимировать практически любое свойство HTML элемента. Правило анимации указывается в блоке keyframes.

Свойство animation может быть использовано для анимации других свойств CSS, таких как цвет фона, высота, длинна, положение элемента и многие другие.

Давайте рассмотрим пример, где мы меняем цвет фона у элемента.

Создадим в HTML элемент с классом «element»:

В CSS создаем правило для анимации в блоке keyframes. Назовем анимацию changeColor. Анимация будет менять цвет фона объекта с красного на синий.

@keyframes changeColor < 0% < background-color: red; >100% < background-color: blue; >> 

Здесь 0% — это начало анимации, 100% — это конец анимации. Все что между движок CSS автоматически анимирует в плавное изменениe свойста, которое вы выбрали. В данном случае будет плавное изменение цвета.

Теперь добавим эту анимацию как свойство animation в CSS стилях для элемента. Наш CSS будет выглядеть таким образом:

.element

Результат данной анимации будет выглядеть так:

Мы можем контролировать анимацию при помощи дополнительных свойств.

В данном примере после имени анимации мы указали скорость анимации (2s) и количество повторений (в данном случае бесконечное количество повторений infinite).

Существует несколько свойств анимации. Рассмотрим каждый из них:

• animation-name: имя анимации определенным правилом keyframes
• animation-duration: сколько времени займет один цикл анимации от 0% до 100%
• animation-timing-function: определяет кривые ускорения, такие как ease и linear
• animation-delay: время задержки между моментом загрузки элемента в браузере и началом анимации.
• animation-direction: указывает направление анимации. По умолчанию анимация идет от 0% до 100%. С помощью данного свойства можно сделать так, чтобы анимация шла в обратную сторону от 100% до 0% или каждый раз меняла направление.
• animation-iteration-count: количество повторений цикла анимации. Можно установить число или указать infinite для бесконечного повторения анимации.
• animation-fill-mode: устанавливает значение, которое устанавливается до начала или после окончания анимации. Например, можно указать, что после завершения всех циклов анимации фон элемента будет зеленый.
• animation-play-state: проигрывает/ставит на паузу анимацию

Свойства анимации указываются таким образом:

.element

Все эти свойства можно записать и одной строкой:

.element

Свойства анимации могут принимать значения, указанные в таблице:

Правило keyframes может иметь неограниченное количество шагов. Не обязательно только начало и конец. Можно указать значения и для середины цикла анимации:

@keyframes changeColor < 0% < background-color: red; >50% < background-color: yellow; >100% < background-color: blue; >> 

HTML элементу можно одновременно присвоить несколько анимаций. Давайте добавим нашему элементу анимацию move, которая будет двигать элемент влево и вправо.

Добавим новый блок keyframes

@keyframes move < 0% < margin-left: 0px; >100% < margin-left: 200px; >> 

Перечислим анимации через запятую

animation: changeColor 3s infinite, move 4s infinite alternate; 

Как видите, мы присвоили одному элементу одновременно 2 анимации: движение и смену цветов.

Практические примеры

Теперь давайте рассмотрим более практические примеры применения CSS анимации, которые используются в веб страницах и веб приложениях.

Анимация спиннера загрузки

Очень часто можно увидеть во время загрузки контента вращающийся спиннер. Давайте создадим такой спиннер при помощи CSS анимации.

В этом примере мы использовали анимацию rotate, где зациклили вращение спиннера на 360 градусов.

@keyframes rotate < from to > 

Далее мы использовали эту анимацию в списке стилей для элемента:

animation: rotate 1.5s infinite linear 

Анимированная форма авторизации

Давайте создадим что-то посложнее. Например анимированную форму авторизации.

Сделаем зацикленную анимацию для кнопки Submit. Добавим анимированный эффект для наведения курсора на кнопку. Сделаем так же анимацию для лейблов Username и Password в момент, когда поля ввода в фокусе.

Обратите внимание на несколько span в кнопке Submit. Именно их мы потом и будем анимировать.

Добавим статические стили в CSS, чтобы наша форма выглядела красиво:

html < height: 100%; >body < margin:0; padding:0; font-family: sans-serif; background: linear-gradient(#141e30, #243b55); >.login-box < position: absolute; top: 50%; left: 50%; width: 400px; padding: 40px; transform: translate(-50%, -50%); background: rgba(0,0,0,.5); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; >.login-box h2 < margin: 0 0 30px; padding: 0; color: #fff; text-align: center; >.login-box .user-box < position: relative; >.login-box .user-box input < width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; >.login-box .user-box label < position: absolute; top:0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; >.login-box .user-box input:focus ~ label, .login-box .user-box input:valid ~ label < top: -20px; left: 0; color: #03e9f4; font-size: 12px; >.login-box form a < position: relative; display: inline-block; padding: 10px 20px; color: #03e9f4; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing: 4px >.login-box a:hover

Теперь добавим анимации. Анимировать мы будем элементы в кнопке Submit.

Добавим 4 блока keyframes с правилами анимации:

@keyframes btn-anim1 < 0% < left: -100%; >50%,100% < left: 100%; >> @keyframes btn-anim2 < 0% < top: -100%; >50%,100% < top: 100%; >> @keyframes btn-anim3 < 0% < right: -100%; >50%,100% < right: 100%; >> @keyframes btn-anim4 < 0% < bottom: -100%; >50%,100% < bottom: 100%; >> 

Как видно, мы будем использовать 4 анимации по одной для каждого . Наши элементы будут двигаться по очереди вверх, вниз, влево, вправо, создавая иллюзию беспрерывного вращения вокруг кнопки.

Добавим теперь эту анимацию каждому элементу:

.login-box a span:nth-child(1) < animation: btn-anim1 1s linear infinite; >.login-box a span:nth-child(2) < animation: btn-anim2 1s linear infinite; animation-delay: .25s >.login-box a span:nth-child(3) < animation: btn-anim3 1s linear infinite; animation-delay: .5s >.login-box a span:nth-child(4)

Как видите, мы добились стильной анимации, используя только HTML и CSS.

Заключение

В данной статье мы рассмотрели, как использовать анимацию CSS и HTML без использования JavaScript. Инструментарий предоставляемый CSS очень гибкий: можно использовать его для создания большого количество разных анимаций, где лимитом будет только ваше воображение и здравый смысл. Вот здесь можно посмотреть различные креативные CSS анимации для вдохновения.