Помощь со стилями

  • Автор темы moneytown1
  • Дата начала
moneytown1
Участник
Сообщения
14
Реакции
0
Ребята, родненькие, помогите:)
Хочу сделать штуку такую: при наведении на картинку (на главной странице) мышкой чтоб она вращалась. Знаю, что делается это в css, есть код css, но вы только скажите куда его вставить нужно и как вообще это реализовать?
 
CUTUZ
D E S I G N E R
Участник
Сообщения
47
Реакции
25
HTML:
<img class="rot" src="..."/>
CSS:
img.rot:hover {
  animation: 1s linear 0s normal none infinite running rot;
  -webkit-animation: 1s linear 0s normal none infinite running rot;
}
@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
 
Последнее редактирование:
moneytown1
Участник
Сообщения
14
Реакции
0
CUTUZ написал(а):
HTML:
<img class="rot" src="..."/>
CSS:
img.rot:hover {
  animation: 1s linear 0s normal none infinite running rot;
  -webkit-animation: 1s linear 0s normal none infinite running rot;
}
@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
А куда именно CSS код ставить? У меня стандарт фруктовой фермы в основе.
 
moneytown1
Участник
Сообщения
14
Реакции
0
CUTUZ написал(а):
HTML:
<img class="rot" src="..."/>
CSS:
img.rot:hover {
  animation: 1s linear 0s normal none infinite running rot;
  -webkit-animation: 1s linear 0s normal none infinite running rot;
}
@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
И ещё вопрос, как сделать свечение вокруг блоков с текстом? Это типо рамка но не рамка, просто как будто неоновая обводка вокруг рамок с текстом. Буду очень признателен за помощь.
Вот пример рамки которая нужна, только просьба объяснить что и куда если не затруднит)
 

Вложения

CUTUZ
D E S I G N E R
Участник
Сообщения
47
Реакции
25
moneytown1 написал(а):
И ещё вопрос, как сделать свечение вокруг блоков с текстом? Это типо рамка но не рамка, просто как будто неоновая обводка вокруг рамок с текстом. Буду очень признателен за помощь.
Вот пример рамки которая нужна, только просьба объяснить что и куда если не затруднит)
box-shadow: 0 0 10px red;
Впиши в стилях. Используем тень как свечение, заменив черный цвет на красный
0 - сдвиг по Х
0- сдвиг по Y
10px - размер свечения/тени
Red - цвет
 
CUTUZ
D E S I G N E R
Участник
Сообщения
47
Реакции
25
moneytown1 написал(а):
А куда именно CSS код ставить? У меня стандарт фруктовой фермы в основе.
Впиши в текстовый документ, сохранив в формате name.css и в основном файле структуры страницы укажи путь к этому файлу <link type=“style” src=“name.css”> между <head>...</head>
Если не ошибаюсь, должно получится.
 
CUTUZ
D E S I G N E R
Участник
Сообщения
47
Реакции
25
CUTUZ написал(а):
Впиши в текстовый документ, сохранив в формате name.css и в основном файле структуры страницы укажи путь к этому файлу <link type=“style” src=“name.css”> между <head>...</head>
Если не ошибаюсь, должно получится.
Или в самом коде, где прописана эта картинка вертящаяся, вставь этот css в теги <style>сюда</style>
 
moneytown1
Участник
Сообщения
14
Реакции
0
CUTUZ написал(а):
Или в самом коде, где прописана эта картинка вертящаяся, вставь этот css в теги <style>сюда</style>
Ого, насколько подробно) этот ксс нужно вставить перед картинкой или перед какими строками? Или перед <div>? Или как?) Я просто не особо бум-бум по стилям
 
CUTUZ
D E S I G N E R
Участник
Сообщения
47
Реакции
25
moneytown1 написал(а):
Ого, насколько подробно) этот ксс нужно вставить перед картинкой или перед какими строками? Или перед <div>? Или как?) Я просто не особо бум-бум по стилям
вставь после </head> нормально будет. А вообще по сути без разницы практически.
 
moneytown1
Участник
Сообщения
14
Реакции
0
  • #10
CUTUZ написал(а):
вставь после </head> нормально будет. А вообще по сути без разницы практически.
И ещё вопрос, таким Макаром я смогу создавать в этом файле другие эффекты для других фото?
 
moneytown1
Участник
Сообщения
14
Реакции
0
  • #11
CUTUZ написал(а):
box-shadow: 0 0 10px red;
Впиши в стилях. Используем тень как свечение, заменив черный цвет на красный
0 - сдвиг по Х
0- сдвиг по Y
10px - размер свечения/тени
Red - цвет
Это нужно каждую рамку по классу искать в стилях? Папка main.cas? Я верно понимаю?
И там можно будет эту строчку между любыми строками в столбце поставить? Неважно же куда я запихну главное чтоб в пределах строк определенного класса?
 
CUTUZ
D E S I G N E R
Участник
Сообщения
47
Реакции
25
  • #12
moneytown1 написал(а):
И ещё вопрос, таким Макаром я смогу создавать в этом файле другие эффекты для других фото?
Да
 
CUTUZ
D E S I G N E R
Участник
Сообщения
47
Реакции
25
  • #13
moneytown1 написал(а):
Это нужно каждую рамку по классу искать в стилях? Папка main.cas? Я верно понимаю?
И там можно будет эту строчку между любыми строками в столбце поставить? Неважно же куда я запихну главное чтоб в пределах строк определенного класса?
Ничего не понял. Все блоки с class="" будут иметь один и тот же стиль, который мы прописали. в html коде рамку которую тебе нужно сделать светящейся возьми в блок с классом (например class="glow"), затем в тегах <style>...</style> пропиши название этого класса и какой стиль ему задать:
Код:
<style>
    .glow{
        box-shadow: 0px 0px 10px red;
    }
</style>
У любого элемента появится красное свечение, если пропишешь ему класс class="glow"


2. Вариант: вписать в самом блоке его стиль:
Код:
<img src="название.png" style="box-shadow: 0px 0px 10px red;"/>
 
Сверху