Смотрите видео ниже, чтобы узнать, как установить наш сайт в качестве веб-приложения на домашнем экране.
Примечание: В настоящее время эта функция требует доступа к сайту с помощью встроенного браузера Safari.
.userBanner.test {
display: inline-block;
text-align: center;
font-weight: 600;
font-size: 65%;
color: #fff;
text-transform: uppercase;
padding: 3px 6px;
width: 100%;
border: none;
border-radius: 10px;
background-size: 600% 600%;
position: relative;
overflow: hidden;
animation: AnimBanner 10s ease infinite
}
.userBanner.test:before {
content: "";
position: absolute;
background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%);
background-repeat: no-repeat;
top: 0px;
left: -80%;
width: 100%;
height: 100%;
animation: light 2.5s infinite
}
@keyframes...
.userBanner {
display: inline-block;
text-align: center;
font-weight: 600;
font-size: 65%;
color: #fff;
text-transform: uppercase;
padding: 3px 6px;
width: 100%;
border: none;
border-radius: 10px;
background-size: 600% 600%;
position: relative;
overflow: hidden;
animation: AnimBanner 10s ease infinite
}
.userBanner:before {
content: "";
position: absolute;
background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%);
background-repeat: no-repeat;
top: 0px;
left: -80%;
width: 100%;
height: 100%;
animation: light 2.5s infinite
}
@keyframes AnimBanner {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
Изменилextra.less:
Код:.userBanner { display: inline-block; text-align: center; font-weight: 600; font-size: 65%; color: #fff; text-transform: uppercase; padding: 3px 6px; width: 100%; border: none; border-radius: 10px; background-size: 600% 600%; position: relative; overflow: hidden; animation: AnimBanner 10s ease infinite } .userBanner:before { content: ""; position: absolute; background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%); background-repeat: no-repeat; top: 0px; left: -80%; width: 100%; height: 100%; animation: light 2.5s infinite } @keyframes AnimBanner { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } }
Это для всех баннеров, свои добавляй отдельно, советую указывать только цвет баннера и больше ничего, так как параметры уже стоят
А как сделать чтоб не для всех былоextra.less:
Код:.userBanner { display: inline-block; text-align: center; font-weight: 600; font-size: 65%; color: #fff; text-transform: uppercase; padding: 3px 6px; width: 100%; border: none; border-radius: 10px; background-size: 600% 600%; position: relative; overflow: hidden; animation: AnimBanner 10s ease infinite } .userBanner:before { content: ""; position: absolute; background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%); background-repeat: no-repeat; top: 0px; left: -80%; width: 100%; height: 100%; animation: light 2.5s infinite } @keyframes AnimBanner { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } }
Это для всех баннеров, свои добавляй отдельно, советую указывать только цвет баннера и больше ничего, так как параметры уже стоят
А как сделать чтоб не для всех было
.userBanner.test {
display: inline-block;
text-align: center;
font-weight: 600;
font-size: 65%;
color: #fff;
text-transform: uppercase;
padding: 3px 6px;
width: 100%;
border: none;
border-radius: 10px;
background-size: 600% 600%;
position: relative;
overflow: hidden;
animation: AnimBanner 10s ease infinite
}
.userBanner.test:before {
content: "";
position: absolute;
background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%);
background-repeat: no-repeat;
top: 0px;
left: -80%;
width: 100%;
height: 100%;
animation: light 2.5s infinite
}
@keyframes AnimBanner {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
Я что-то не догоняю, сделал все как сказано но у меня там просто жирным написан текст баннера без краски и переливанияКод:.userBanner.test { display: inline-block; text-align: center; font-weight: 600; font-size: 65%; color: #fff; text-transform: uppercase; padding: 3px 6px; width: 100%; border: none; border-radius: 10px; background-size: 600% 600%; position: relative; overflow: hidden; animation: AnimBanner 10s ease infinite } .userBanner.test:before { content: ""; position: absolute; background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%); background-repeat: no-repeat; top: 0px; left: -80%; width: 100%; height: 100%; animation: light 2.5s infinite } @keyframes AnimBanner { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } }
Где test, пишешь любое название, можешь оставить так. Потом заходишь в группу пользователя которая нужна и тут пишешь "test":
Посмотреть вложение 158325
Секунду, щас глянуЯ что-то не догоняю, сделал все как сказано но у меня там просто жирным написан текст баннера без краски и переливания
@keyframes light {
0% {
left: -80%
}
100% {
left: 80%
}
}
Отдельно?Код:@keyframes light { 0% { left: -80% } 100% { left: 80% } }
Добавь в extra.less
.userBanner.test {
display: inline-block;
text-align: center;
font-weight: 600;
font-size: 65%;
color: #fff;
text-transform: uppercase;
padding: 3px 6px;
width: 100%;
border: none;
border-radius: 10px;
background-size: 600% 600%;
position: relative;
overflow: hidden;
animation: AnimBanner 10s ease infinite
}
.userBanner.test:before {
content: "";
position: absolute;
background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%);
background-repeat: no-repeat;
top: 0px;
left: -80%;
width: 100%;
height: 100%;
animation: light 2.5s infinite
}
@keyframes AnimBanner {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes light {
0% {
left: -80%
}
100% {
left: 80%
}
}
.userBanner.test {
background-image: linear-gradient(80deg, #9a36b3, #9a36b3)
}
Спасибо большое, только вот ещё 2 вопросаВот полный код:
Код:.userBanner.test { display: inline-block; text-align: center; font-weight: 600; font-size: 65%; color: #fff; text-transform: uppercase; padding: 3px 6px; width: 100%; border: none; border-radius: 10px; background-size: 600% 600%; position: relative; overflow: hidden; animation: AnimBanner 10s ease infinite } .userBanner.test:before { content: ""; position: absolute; background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%); background-repeat: no-repeat; top: 0px; left: -80%; width: 100%; height: 100%; animation: light 2.5s infinite } @keyframes AnimBanner { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes light { 0% { left: -80% } 100% { left: 80% } } .userBanner.test { background-image: linear-gradient(80deg, #9a36b3, #9a36b3) }
Капс:Спасибо большое, только вот ещё 2 вопроса
Как сделать чтоб текст баннера был по середине и не капсом? Я подредактировал но не нашел
Мы используем основные cookies для обеспечения работы этого сайта, а также дополнительные cookies для обеспечения максимального удобства пользователя.
Посмотрите дополнительную информацию и настройте свои предпочтения