Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
KISS_ARMY
1 / 1 / 3
Регистрация: 03.07.2013
Сообщений: 263
1

Мигающий текст к готовому css

08.09.2016, 14:45. Просмотров 671. Ответов 3
Метки нет (Все метки)

Добрый есть следующий код
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.bx_item_vidget{
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
    text-align: left;
    color: #FF0000;
    font-size: 15px;
    line-height: normal;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    padding-top: 64px;
    height: 64px;
    margin:0 auto 7px;
    border: 1px solid #c3c3c3;
}
К нему надо применить следующий код (это эффект анимации)
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
blink1 {
  -webkit-animation: blink1 3s linear infinite;
  animation: blink1 3s linear infinite;
}
@-webkit-keyframes blink1 {
  0% { color: rgba(34, 34, 34, 1); }
  50% { color: rgba(34, 34, 34, 0); }
  100% { color: rgba(34, 34, 34, 1); }
}
@keyframes blink1 {
  0% { color: rgba(34, 34, 34, 1); }
  50% { color: rgba(34, 34, 34, 0); }
  100% { color: rgba(34, 34, 34, 1); }
}
не подскажите какой итог должен быть как он должен выглядеть?
Сделал так, вроде работает, но что то мне сдается что сам стиль написания кода неправильный
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.bx_item_vidget{
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    text-align: left;
    font-size: 12px;
    line-height: normal;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    padding-top: 54px;
    height: 54px;
    margin:0 auto 5px;
    border: 1px solid #c3c3c3;
}
.bx_item_vidget{
  -webkit-animation: blink1 4s linear infinite;
  animation: blink1 3s linear infinite;
}
@-webkit-keyframes blink1 {
  0% { color: rgba(255, 0, 0, 1); }
  50% { color: rgba(34, 34, 34, 0); }
  100% { color: rgba(255, 0, 0, 1); }
}
@keyframes blink1 {
  0% { color: rgba(255, 0, 0, 1); }
  50% { color: rgba(34, 34, 34, 0); }
  100% { color: rgba(255, 0, 0, 1); }
}

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

1
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
08.09.2016, 14:45
Ответы с готовыми решениями:

Важно! Мигающий текст
Как сделать мигающий текст на страничке . Вот сайт http://ekonomplast.ru/тут...

Текст в таблице (CSS)
Добрый день. У меня появилась небольшая проблема. Я создал таблицу, но текст...

Сжать Текст CSS
Доброго времени суток! проблема такая: Нужно в заголовке сайта при верстке...

Текст html/css
Доброго времени суток, нужна помощь, как поставить текст ( Учить - Легко!) ...

Как привязать текст? CSS
Код: .left-blocks1 { float:left; width:294px; } .left-block1-t { width:294px;...

3
boilzzz
Богатый духовно
453 / 260 / 145
Регистрация: 10.03.2015
Сообщений: 1,045
Завершенные тесты: 2
08.09.2016, 15:28 2
KISS_ARMY, Тут дело в том ни какой итог должен быть, а какой итог хотите вы.
0
KISS_ARMY
1 / 1 / 3
Регистрация: 03.07.2013
Сообщений: 263
08.09.2016, 17:17  [ТС] 3
Цитата Сообщение от boilzzz Посмотреть сообщение
Тут дело в том ни какой итог должен быть, а какой итог хотите вы.
Все очень просто текст должен мегать плавно
0
boilzzz
Богатый духовно
453 / 260 / 145
Регистрация: 10.03.2015
Сообщений: 1,045
Завершенные тесты: 2
08.09.2016, 17:30 4
KISS_ARMY, У вас он мигает плавно, и запись кода правильная.
Ну если только поправить то это объединить, 2-а одинаковых селектора в один
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.bx_item_vidget{
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    text-align: left;
    font-size: 12px;
    line-height: normal;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    padding-top: 54px;
    height: 54px;
    margin:0 auto 5px;
    border: 1px solid #c3c3c3;
    -webkit-animation: blink1 3s linear infinite;
    animation: blink1 3s linear infinite;
}
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
08.09.2016, 17:30

CSS - Текст по центру DIV'a
Как сделать так, чтобы текст был относительно иконки по центру? <div...

Css - сместить текст на бордюр
Ни как не могу до конца запомнить весь этот css...( Нужно срочно сделать блок...

Простенький вопрос связанный с CSS - Текст
Плиз не обзывать нубом и не ржать )))) У меня вот такой простенький вопрос....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru