Как сделать анимацию в html сайт

Метод 1 Однотонный фон

  1. Изображение с названием 2609629 1 1

    1

    Откройте HTML-файл в текстовом редакторе. В HTML5 атрибут <bgcolor> больше не поддерживается. Цвет фона и другие элементы стиля веб-страницы редактируются при помощи CSS.[1]

  2. Изображение с названием 2609629 2 1

    2

    В документ вставьте теги <style></style>. Любая информация о стиле страницы (в том числе цвет фона) вводится между этими тегами. Если в документе уже есть теги <style></style>, перейдите к ним. <!DOCTYPE html> <html> <head> <style> </style> </head> </html>
  3. Изображение с названием 2609629 3 1

    3

    Внутри тегов <style></style> введите элемент «body». Любые изменения элемента «body» в CSS оказывают влияние на всю страницу. <!DOCTYPE html> <html> <head> <style> body { } </style> </head> <body> </body> </html>
  4. Изображение с названием 2609629 4 1

    4

    К элементу «body» добавьте свойство «background-color». Обратите внимание, что в данном случае слово «color» (цвет) пишется только так (и никак иначе). <!DOCTYPE html> <html> <head> <style> body { background-color: } </style> </head> <body> </body> </html>
  5. Изображение с названием 2609629 5 1

    5

    К свойству «background-color» добавьте нужный цвет фона. Можно ввести имя цвета (green (зеленый), blue (синий), red (красный) и так далее) или шестнадцатеричный (HEX) код цвета (например, #000000 – черный, #ff0000 – красный и так далее), или RGB-значение цвета (например, rgb(255,255,0) – желтый). Ниже приведен пример использования шестнадцатеричного кода, который позволит сделать фон такого же цвета, как баннер wikiHow: <!DOCTYPE html> <html> <head> <style> body { background-color: #93B874; } </style> </head> <body> </body> </html>
    • Белый: #FFFFFF
    • Светло-розовый: #FFCCE6
    • Красновато-коричневый: #993300
    • Темно-синий: #4B0082
    • Фиолетовый: #EE82EE
    • На этом сайте можно найти шестнадцатеричный код любого цвета.
  6. Изображение с названием 2609629 6 1

    6

    Окрасьте в цвет фона другие элементы страницы при помощи свойства «background-color». Аналогично тому, как задается цвет фона в элементе «body», цвет фона можно использовать для окрашивания других элементов страницы. Для этого внутри тегов <style></style> к свойству «background-color» добавьте нужные элементы.[2] <!DOCTYPE html> <html> <head> <style> body { background-color: #93B874; } h1 { background-color: orange; } p { background-color: rgb(255,0,0); } </style> </head> <body> <h1>Этот заголовок окрасится в оранжевый цвет</h1> <p>Этот параграф окрасится в красный цвет</p> </body> </html>

Метод 2 Изображение как фон

  1. Изображение с названием 2609629 7 1

    1

    Откройте HTML-файл в текстовом редакторе. Многие пользователи в качестве фона предпочитают использовать изображение. В качестве фонового изображения можно выбрать узор, текстуры, фото или любой другой вид изображения. В HTML5 фон веб-страницы задается внутри тегов <style></style> при помощи CSS.

  2. Изображение с названием 2609629 8 1

    2

    В HTML-файл вставьте теги <style></style>. Любая информация о стиле страницы (в том числе цвет фона) вводится между этими тегами. Если в документе уже есть теги <style></style>, перейдите к ним. <!DOCTYPE html> <html> <head> <style> </style> </head> </html>
  3. Изображение с названием 2609629 9 1

    3

    Внутри тегов <style></style> введите элемент «body». Любые изменения элемента «body» в CSS оказывают влияние на всю страницу. <!DOCTYPE html> <html> <head> <style> body { } </style> </head> <body> </body> </html>
  4. Изображение с названием 2609629 10 1

    4

    К элементу «body» добавьте свойство «background-image». Добавляя это свойство, не забудьте про имя файла с изображением. Убедитесь, что файл с изображением хранится в одной папке с HTML-файлом (или введите полный путь к файлу на веб-сервере). [3] <!DOCTYPE html> <html> <head> <style> body { background-image: url("изображение.png"); background-color: #93B874; } </style> </head> <body> </body> </html>
    • Также стоит добавить свойство «background-color» на случай, если фоновое изображение не загрузится.
  5. Изображение с названием 2609629 11 1

    5

    Наложите несколько изображений друг на друга. Это сработает в том случае, когда изображения имеют прозрачный фон и дополняют друг друга, если наложить одно на другое. <!DOCTYPE html> <html> <head> <style> body { background-image: url("изображение1.png"), url("изображение2.gif"); background-color: #93B874; } </style> </head> <body> </body> </html>
    • Изображение, перечисленное первым, будет отображаться поверх других изображений. Второе изображение будет отображаться под первым и так далее.

Метод 3 Градиентный фон

  1. Изображение с названием 2609629 12

    1

    Используйте CSS, чтобы создать градиентный фон. Если вам нужно что-то более оригинальное, чем однотонный фон (читайте первый раздел), но менее яркое по сравнению с многоцветной анимацией (читайте следующий раздел), установите градиентный фон. Градиентные цвета плавно переходят друг в друга. Создать и настроить градиентный фон можно при помощи CSS. Перед тем как создать такой фон, вспомните или изучите основы работы с CSS.

  2. Изображение с названием 2609629 13

    2

    Запомните основной синтаксис. При создании градиентного фона нужно указать два параметра: начальную точку/угол и палитру цветов, которые будут переходить друг в друга. Можно выбрать несколько цветов и задать направление или угол градиента.[4] background: linear-gradient(направление/угол, цвет1, цвет2, цвет3 и так далее);
  3. Изображение с названием 2609629 14

    3

    Создайте вертикальный градиент. Если не указать направление, цвета будут переходить друг в друга сверху вниз. В различных браузерах функция градиента реализуется по-разному, поэтому нужно включить несколько версий кода. <!DOCTYPE html> <html> <head> <style> html { min-height: 100%; / Это необходимо для того, чтобы градиентный фон развернулся на всю страницу. / } body { background: -webkit-linear-gradient(#93B874, #C9DCB9); / Chrome 10+, Safari 5.1+ / background: -o-linear-gradient(#93B874, #C9DCB9); / Opera 11.1+ / background: -moz-linear-gradient(#93B874, #C9DCB9); / Firefox 3.6+ / background: linear-gradient(#93B874, #C9DCB9); / Standard syntax (must be last) / background-color: #93B874; / Лучше также указать цвет фона на случай, если градиентный фон не загрузится / } </style> </head> <body> </body> </html>
  4. Изображение с названием 2609629 15

    4

    Создайте направленный градиент. Укажите направление градиента, чтобы изменить способ перехода цветов друг в друга. Обратите внимание, что различные браузеры интерпретируют направление градиента по-разному. Приведенные ниже версии кода приведут к отображению одного и того же градиентного фона.[5] <!DOCTYPE html> <html> <head> <style> html { min-height: 100%; } body { background: -webkit-linear-gradient(left, #93B874, #C9DCB9); / слева направо / background: -o-linear-gradient(right, #93B874, #C9DCB9); / заканчивая справа / background: -moz-linear-gradient(right, #93B874, #C9DCB9); / заканчивая справа / background: linear-gradient(to right, #93B874, #C9DCB9); / двигаясь вправо / background-color: #93B874; / Лучше также указать цвет фона на случай, если градиентный фон не загрузится / } </style> </head> <body> </body> </html>
  5. Изображение с названием 2609629 16

    5

    Используйте другие параметры для настройки градиента. Существует множество параметров градиента.
    • Например, можно указать не только более двух цветов, но и добавить проценты (после каждого цвета). Это позволит задать ширину каждого цветового сегмента, отображаемого на экране. background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
    • Сделайте цвета прозрачными. Так можно добиться «увядания» цвета, то есть перехода от насыщенного к блеклому цвету. Используйте функцию rgba(), чтобы указать цвет. Конечная цифра определяет степень прозрачности:0 – насыщенный цвет и 1 – прозрачный цвет. background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));

Метод 4 Фон с меняющимися цветами

  1. Изображение с названием 2609629 17

    1

    В HTML-файле найдите тег <style>. Если вам не нравится однотонный фон, попробуйте установить фон с меняющимися цветами (многоцветная анимация). В HTML 5 параметры фона задаются при помощи CSS. Если вы никогда не работали с CSS, сначала установите однотонный фон (читайте первый раздел), а затем переходите к этому методу.

  2. Изображение с названием 2609629 18

    2

    К элементу «body» добавьте свойства анимации. Нужно добавить 2 разнородных свойства, потому что различные браузеры требуют разный код. [6] <!DOCTYPE html> <html> <head> <style> body { -webkit-animation: colorchange html 60s infinite; animation: colorchange 60s infinite; } </style> </head> <body> </body> </html>
    • -webkit-animation – это свойство необходимо для браузеров на основе Chromium (Chrome, Opera, Safari). animation – это свойство, которое поддерживается остальными браузерами.
    • colorchange – это название анимации в нашем примере.
    • 60s – это длительность (60 с) анимации/перехода. Задайте время в стандартном синтаксисе и в синтаксисе WebKit.
    • infinite – указывает на то, что анимация должна повторяться бесконечное число раз. Чтобы воспроизвести анимацию 1 раз и окрасить фон в последний показанный цвет, не вводите этот параметр.
  3. Изображение с названием 2609629 19

    3

    Укажите цвета анимации. Воспользуйтесь правилом @keyframes, чтобы указать цвет фона, на котором анимация будет повторяться, а также промежуток времени, в течение которого каждый цвет будет отображаться на экране. Здесь также нужно вводить определенный код для разных браузеров.[7] <!DOCTYPE html> <html> <head> <style> body { -webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite; } @-webkit-keyframes colorchange { 0% {background: #33FFF3;} 25% {background: #78281F;} 50% {background: #117A65;} 75% {background: #DC7633;} 100% {background: #9B59B6;} } @keyframes colorchange { 0% {background: #33FFF3;} 25% {background: #78281F;} 50% {background: #117A65;} 75% {background: #DC7633;} 100% {background: #9B59B6;} } </style> </head> <body> </body> </html>
    • Обратите внимание, что у правил @-webkit-keyframes и @keyframes одинаковые цвета фона и проценты. Это необходимо для того, чтобы данный код одинаково обрабатывался разными браузерами.
    • Проценты (0%, 25% и так далее) имеют одинаковую продолжительность анимации (60s). При загрузке страницы фон окрасится в цвет, указанный в 0% (#33FFF3). После того, как анимация будет воспроизведена на 25% (от 60 с), фон окрасится в цвет, указанный в #78281F (и так далее)
    • В соответствии с личными предпочтениями можно изменить временные интервалы и цвета.

Эту страницу просматривали 18 405 раза.

Была ли эта статья полезной?

 


Источник: https://ru.wikihow.com/%D0%B7%D0%B0%D0%B4%D0%B0%D1%82%D1%8C-%D1%86%D0%B2%D0%B5%D1%82-%D1%84%D0%BE%D0%BD%D0%B0-%D0%B2-HTML


Рекомендуем посмотреть ещё:


Закрыть ... [X]

Как вставить изображение в html страницу? вставка Связать буклированная кардиган



Как сделать анимацию в html сайт Сквозная и одновременно своя в каждом разделе
Как сделать анимацию в html сайт MoeTV. org Хороший портал о кино
Как сделать анимацию в html сайт Как задать цвет фона в HTML - m
Как сделать анимацию в html сайт Microsoft Silverlight Википедия
Как сделать анимацию в html сайт HTML, CSS, JavaScript, PHP Статьи
LPG-массаж лица Берлускони, Сильвио Википедия Взрослый День рождения Праздничный Портал Выкройка сумок из ткани, пошаговые инструкции с Ирригатор здоровые зубы без стоматолога. Как выбрать? История реальная и вымышленная. Механизмы Как оригинально подарить деньги на свадьбу: основные Мобильный телефон Meizu U10 - «Смартфон MEIZU U10 Перевод Гоблина. Скачать перевод Гоблина бесплатно. Фильмы