Анимированные фоны для блоков и страниц

Вариант 1:

<canvas id="circles"></canvas>

1	<canvas id="circles"></canvas>

#circles { 
background:#477ab9;
width:100%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#circles:hover { 
background:#3D689C;
}

#circles {

background:#477ab9;

width:100%;

-webkit-transition: all 0.4s ease-in-out;

-moz-transition: all 0.4s ease-in-out;

-ms-transition: all 0.4s ease-in-out;

-o-transition: all 0.4s ease-in-out;

transition: all 0.4s ease-in-out;

}

#circles:hover {

background:#3D689C;

}

<script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="http://atuin.ru/js/art/circles.js" type="text/javascript"></script>

1 2	<script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> <script src="http://atuin.ru/js/art/circles.js" type="text/javascript"></script>

Должна быть подключена библиотека jQuery и скрипт фона

Вариант 2:

Открыть в новом окне

<canvas id="circles2"></canvas>

1	<canvas id="circles2"></canvas>

#circles2 { 
background:#477ab9;
width:100%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#circles2:hover { 
background:#3D689C;
}

#circles2 {

background:#477ab9;

width:100%;

-webkit-transition: all 0.4s ease-in-out;

-moz-transition: all 0.4s ease-in-out;

-ms-transition: all 0.4s ease-in-out;

-o-transition: all 0.4s ease-in-out;

transition: all 0.4s ease-in-out;

}

#circles2:hover {

background:#3D689C;

}

<script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="http://atuin.ru/js/art/circles2.js" type="text/javascript"></script>

1 2	<script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> <script src="http://atuin.ru/js/art/circles2.js" type="text/javascript"></script>

Должна быть подключена библиотека jQuery и скрипт фона

Вариант 3:

Открыть в новом окне

<canvas id="square"></canvas>

1	<canvas id="square"></canvas>

#square { 
background:#477ab9;
width:100%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#square:hover { 
background:#3D689C;
}

#square {

background:#477ab9;

width:100%;

-webkit-transition: all 0.4s ease-in-out;

-moz-transition: all 0.4s ease-in-out;

-ms-transition: all 0.4s ease-in-out;

-o-transition: all 0.4s ease-in-out;

transition: all 0.4s ease-in-out;

}

#square:hover {

background:#3D689C;

}

<script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="http://atuin.ru/js/art/square.js" type="text/javascript"></script>

1 2	<script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> <script src="http://atuin.ru/js/art/square.js" type="text/javascript"></script>

Должна быть подключена библиотека jQuery и скрипт фона

Вариант 4:

Открыть в новом окне

<canvas id="triangle"></canvas>

1	<canvas id="triangle"></canvas>

#triangle { 
background:#477ab9;
width:100%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#triangle:hover { 
background:#3D689C;
}

#triangle {

background:#477ab9;

width:100%;

-webkit-transition: all 0.4s ease-in-out;

-moz-transition: all 0.4s ease-in-out;

-ms-transition: all 0.4s ease-in-out;

-o-transition: all 0.4s ease-in-out;

transition: all 0.4s ease-in-out;

}

#triangle:hover {

background:#3D689C;

}

<script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="http://atuin.ru/js/art/triangle.js" type="text/javascript"></script>

1 2	<script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> <script src="http://atuin.ru/js/art/triangle.js" type="text/javascript"></script>

Должна быть подключена библиотека jQuery и скрипт фона

Вариант 5:

Открыть в новом окне

<canvas id="word"></canvas>

1	<canvas id="word"></canvas>

#word { 
background:#477ab9;
width:100%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#word:hover { 
background:#3D689C;
}

#word {

background:#477ab9;

width:100%;

-webkit-transition: all 0.4s ease-in-out;

-moz-transition: all 0.4s ease-in-out;

-ms-transition: all 0.4s ease-in-out;

-o-transition: all 0.4s ease-in-out;

transition: all 0.4s ease-in-out;

}

#word:hover {

background:#3D689C;

}

<script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="http://atuin.ru/js/art/word.js" type="text/javascript"></script>

1 2	<script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> <script src="http://atuin.ru/js/art/word.js" type="text/javascript"></script>

Должна быть подключена библиотека jQuery и скрипт фона

Смотрите также: Анимированные фоны - часть 2

Лана: 21.11.2019 в 15:57

Здравствуйте! Подскажите, как установить такой фон на сайт на вордпресс?

Ответить
- Alexander: 21.11.2019 в 17:11
  
  Ну это понятие растяжимое...
  1 - Открыть шаблон нужный и вставить HTML
  2 - Подключить или вставить в существующие CSS и JS
  3 - Настроить по вкусу
  
  Вот пример приблизительный:
  https://atuin.ru/js/art/lines-primer.html
  
  Ответить
  - Лана: 21.11.2019 в 20:17
    
    Спасибо, буду пробовать
    
    Ответить

Вариант 1:

Вариант 2:

Вариант 3:

Вариант 4:

Вариант 5:

Смотрите также:

Добавить комментарий:

Комментарии: