С помощью только одних правил стилей CSS, можно добиться очень интересной анимации различных элементов. Вот есть яркий пример на основе плагина для WordPress Animate It! или отдельная анимация иконок. А также еще примеры с border анимацией, текста и многое, многое другое.
А в этом кратком обзоре сделаем анимацию background в виде движущихся облаков, которую можно было бы использовать в качестве шапки сайта. Получится очень стильно и динамично, а если проявить интерес, то возможно добавить какой-то летающий объект: дирижабль, самолет, воздушный шар и т.д.
<div class="satic-area"> <header class="top-header"> <h1>Анимация background css <span>A Background Image Animation</span></h1> </header> <div class="dynamic-area1"></div> <div class="dynamic-area2"></div> </div>
/* Header */ .top-header{ padding: 1em 0 1em; letter-spacing: -1px; text-align: center; } .top-header h1 { color: #fff; font-weight: 600; font-size: 3em; line-height: 1; margin-bottom: 0; text-shadow: 2px 5px rgba(0,0,0,0.1); } .top-header h1 span { display: block; font-size: 60%; font-weight: 400; padding: 0.8em 0 0.5em 0; color: #fff; } /*stop. Header */ .satic-area { position: relative; width: 100%; height: 100%; background: url(../img/poster-about.jpg) no-repeat center; background-size: cover; } .dynamic-area1 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../img/poster-drop-animate2.png) repeat-x 0px 0px; background-size: cover; -webkit-animation: posterDrop1 6000s linear infinite; -moz-animation: posterDrop1 6000s linear infinite; -o-animation: posterDrop1 6000s linear infinite; animation: posterDrop1 6000s linear infinite; } @-webkit-keyframes posterDrop1 { from { background-position: 0 0; } to { background-position: 4000% 0; } } @-moz-keyframes posterDrop1 { from { background-position: 0 0; } to { background-position: 4000% 0; } } @-o-keyframes posterDrop1 { from { background-position: 0 0; } to { background-position: 4000% 0; } } @keyframes posterDrop1 { from { background-position: 0 0; } to { background-position: 4000% 0; } } .dynamic-area2 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../img/poster-drop-animate1.png) repeat-x 0px 0px; background-size: cover; -webkit-animation: posterDrop2 8000s linear infinite; -moz-animation: posterDrop2 8000s linear infinite; -o-animation: posterDrop2 8000s linear infinite; animation: posterDrop2 8000s linear infinite; } @-webkit-keyframes posterDrop2 { from { background-position: 0 0; } to { background-position: 30000% 0; } } @-moz-keyframes posterDrop2 { from { background-position: 0 0; } to { background-position: 30000% 0; } } @-o-keyframes posterDrop2 { from { background-position: 0 0; } to { background-position: 30000% 0; } } @keyframes posterDrop2 { from { background-position: 0 0; } to { background-position: 30000% 0; } }
Здравствуйте. Скажите пожалуйста как к php файлу своего сайта на wordpress подключить данные из файлов или сами файлы .html, .js, .css? Что, откуда и куда надо расположить чтобы работало? Извините я пытаюсь научиться, но что-то не так видно или прописываю или располагаю на сайте. Хотелось получить эффект в уже готовой странице в определенном месте, в фоне и наоборот — наложить на картинку. Спасибо заранее если подскажите-расскажите как практически это сделать.
Здравствуйте. В php файлы, код вставляется/подключается как обычно, через специальные теги. В WordPress есть также специальные функции, которые могут подключать скрипты и прочее более правильным путем.