Вариант 1:
|
1 |
<canvas id="circles"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#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; } |
|
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:
|
1 |
<canvas id="circles2"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#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; } |
|
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:
|
1 |
<canvas id="square"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#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; } |
|
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:
|
1 |
<canvas id="triangle"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#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; } |
|
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:
|
1 |
<canvas id="word"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#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; } |
|
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
Здравствуйте! Подскажите, как установить такой фон на сайт на вордпресс?
Ну это понятие растяжимое...
1 - Открыть шаблон нужный и вставить HTML
2 - Подключить или вставить в существующие CSS и JS
3 - Настроить по вкусу
Вот пример приблизительный:
https://atuin.ru/js/art/lines-primer.html
Спасибо, буду пробовать