03:32 Стильные строки прогресса на CSS3 | |
| Строку прогресса можно повстречать где угодно. Например, строка прогресса есть почти в каждом браузере или менеджере загрузок, – она отображает стадию завершенности закачки файла. Разрабатываете приложение для рабочего стола или веб-приложение, в определенный момент вам обязательно понадобится данный элемент интерфейса. Учитывая это, в нашем сегодняшнем руководстве мы хотели бы научить вас создавать стильные анимированные строки прогресса посредством CSS3.  HTML Разметка не может быть еще проще: * .progress-bar – определяет основные стили строки прогресса. * .blue – в данном случае, CSS-класс blue добавляет синий стиль для строки. * .stripes – тип анимации для текущей строки прогресса. * span – это поможет вам с заполнением строки прогресса. Выставление параметра ширины поможет вам определять положение «завершенности». CSS-код Основные стили для строки прогресса на CSS3 и заполненной области: .progress-bar {background-color: #1a1a1a;height: 25px;padding: 5px;width: 350px;margin: 50px 0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; }.progress-bar span {display: inline-block;height: 100%;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;-webkit-transition: width .4s ease-in-out;-moz-transition: width .4s ease-in-out;-ms-transition: width .4s ease-in-out;-o-transition: width .4s ease-in-out;transition: width .4s ease-in-out; }  Давайте добавим немного градаций/цвета: .blue span {background-color: #34c2e3; }.orange span {background-color: #fecf23;background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));background-image: -webkit-linear-gradient(top, #fecf23, #fd9215);background-image: -moz-linear-gradient(top, #fecf23, #fd9215);background-image: -ms-linear-gradient(top, #fecf23, #fd9215);background-image: -o-linear-gradient(top, #fecf23, #fd9215);background-image: linear-gradient(top, #fecf23, #fd9215); }.green span {background-color: #a5df41;background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));background-image: -webkit-linear-gradient(top, #a5df41, #4ca916);background-image: -moz-linear-gradient(top, #a5df41, #4ca916);background-image: -ms-linear-gradient(top, #a5df41, #4ca916);background-image: -o-linear-gradient(top, #a5df41, #4ca916);background-image: linear-gradient(top, #a5df41, #4ca916); } Полосы Вероятно, ранее вы уже встречались с подобной CSS3-техникой, здесь мы ее применяем лишь ради наглядного примера: .stripes span {-webkit-background-size: 30px 30px;-moz-background-size: 30px 30px;background-size: 30px 30px;background-image: -webkit-gradient(linear, left top, right bottom,color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),to(transparent));background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent);background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent);background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent);background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent);background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent); -webkit-animation: animate-stripes 3s linear infinite;-moz-animation: animate-stripes 3s linear infinite; }@-webkit-keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;}}@-moz-keyframes animate-stripes {0% {background-position: 0 0;} 100% {background-position: 60px 0;}}  Блеск Вряд ли такое название для CSS3-анимации можно назвать самым подходящим, но это не мешает нам ее продемонстрировать: .shine span {position: relative;}.shine span::after {content: '';opacity: 0;position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: #fff;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;-webkit-animation: animate-shine 2s ease-out infinite;-moz-animation: animate-shine 2s ease-out infinite; }@-webkit-keyframes animate-shine { 0% {opacity: 0; width: 0;}50% {opacity: .5;}100% {opacity: 0; width: 95%;}}@-moz-keyframes animate-shine {0% {opacity: 0; width: 0;}50% {opacity: .5;}100% {opacity: 0; width: 95%;}} Пример с CSS3-строкой прогресса использует псевдо-элемент CSS3 ::after, который создает анимацию. На данный момент контент, произведенный посредством анимации на CSS3, будет работать только в Firefox. Надеемся, что вскоре область поддержки расширится.  Свечение Пошаговая анимация на CSS3, основанная на параметре box-shadow: .glow span {-moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;-webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;-webkit-animation: animate-glow 1s ease-out infinite;-moz-animation: animate-glow 1s ease-out infinite; }@-webkit-keyframes animate-glow {0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} 50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;} 100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}}@-moz-keyframes animate-glow {0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} 50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;} 100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}}  В завершение Что касается дальнейшей веб-разработки, для достижения желаемого результата, вам просто можно поиграть с javascript или jQuery для того, чтобы изменить значение ширины span-элемента этих строк прогресса. Надеемся, что вам понравилось наше сегодняшнее руководство. Спасибо за чтение! * Посмотреть демо | |
|
| |
| Всего комментариев: 0 | |
