Перелив цвета в бэкграунде сайта

Автор Dogica, 15-04-2016, 20:55:19

« назад - далее »

Milla

А кнопка подписки на новости в сайдбаре, которая переливается, это анимация css или скрипт?


Clever

Цитата: Amira от 06-05-2016, 20:30:27
А кнопка подписки на новости в сайдбаре, которая переливается, это анимация css или скрипт?

Анимация css.


DogicaTopic starter

#12
хотя скриптов на сайте не мало - стараюсь функциями не баловаться где можно заменять их на CSS
нагрузка поменьше и вроде как поисковики лучше смотрят.. фукнции все же разные бывают
не все боты способны прочитать оценить и понять адекватно

с главной перелив убрал.. белый фон больше по душе
кто хочет взглянуть как работают предложенные несколько строчек - вот кроссбраузерный CSS код
его можно усложнить и сделать так чтобы цвета менялись по палитре или рандом

<style>
body {background: #DDCEFF;animation: background 22s infinite alternate;}
@-o-keyframes background {50% {background: white;}}
@-webkit-keyframes background {50% {background: white;}}
@keyframes background {50% {background: white;}}
@-ms-keyframes background {50% {background: white;}}
.transition-opacity {opacity: 0;padding: 0px;transition: 2s linear;max-width: 600px;}.transition-opacity:hover {opacity: 1;}
</style>


вот тут рабочий пример:

http://www.dogica.com/js/car.html
DOGICA® 3D World of Dog & Puppy
HTTP://WWW.DOGICA.COM  ;)
  •  

Clever

Цитата: Dogica от 07-05-2016, 11:41:11

кто хочет взглянуть как работают предложенные несколько строчек - вот кроссбраузерный CSS код
его можно усложнить и сделать так чтобы цвета менялись по палитре или рандом

<style>
body {background: #DDCEFF;animation: background 22s infinite alternate;}
@-o-keyframes background {50% {background: white;}}
@-webkit-keyframes background {50% {background: white;}}
@keyframes background {50% {background: white;}}
@-ms-keyframes background {50% {background: white;}}
.transition-opacity {opacity: 0;padding: 0px;transition: 2s linear;max-width: 600px;}.transition-opacity:hover {opacity: 1;}
</style>



Если это кроссбраузерный код, то где потерялся префикс @-moz-keyframes   ?

А вот @-ms-keyframes в этом коде явно лишний, тем более Microsoft официально перестал поддерживать IE ниже 11, а там приставки @-ms-keyframes нет.

Новые браузеры понимают @keyframes, для более старых есть приставки.
На W3C есть таблица  браузеров, префиксы для старых браузеров

Поэтому лучше использовать готовый инструмент для подбора анимации градиента.