Простая анимация CSS вращение предмета
 | |
| Здесь узнаете про постоянное вращение предмета, который создан на чистом CSS, где данный эффект можно применять на разных направлениях портала. Сама анимация сделана больше для привлечение внимание, где выставляю картинку или логотип на сайте, вы одним классом подключаете его вращение, плюс задаете скорость полного поворота. Также можно подключать различные баннеров, что безусловно привлекает внимания, а значит будет замечен. В данном примере показана анимация вращения картинки, но так же это может быть и блок. Вероятно этому трюку не нужно дополнение, ведь простая анимация понятна, а где нужно ее применить, то здесь вы сами можете подключить креатив. Красивая анимация вращения для сайта на чистом CSSЗдесь установочный процесс не сложен по своей конструкции. Где для начало вписываем стили, и тамже в самом верху можно редактировать размер, и выставлять скорость вращение предметов. Установка: HTML Код <div class="kruzhelo_sedmeta"> <img class="vraseniye_snimka" src="https://photo-screen.ru/i/view.php?img=c721cad472d8931f9fa7.PNG"/> </div> CSS Код .kruzhelo_sedmeta { display: flex; justify-content: center; align-items: center; background: #156a20; height: 286px; } .vraseniye_snimka { width: 184px; -webkit-animation-name: rotation; -webkit-animation-duration: 15s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: rotation; -moz-animation-duration: 15s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -o-animation-name: rotation; -o-animation-duration: 15s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; animation-name: rotation; animation-duration: 15s; animation-iteration-count: infinite; animation-timing-function: linear; } @-webkit-keyframes rotation { 0% {-webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);} 100% {-webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);} } @-moz-keyframes rotation { 0% {-webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);} 100% {-webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);} } @-o-keyframes rotation { 0% {-webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);} 100% {-webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);} } @keyframes rotation { 0% {-webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);} 100% {-webkit-transform:rotate(360deg); -moz-transform:rotate(720deg); -o-transform:rotate(360deg); transform:rotate(360deg);} } На этом установочный процесс полностью завершен. Где рекомендую посмотреть demo страницу и понять эту анимацию, которая по свойствам не сложная, но в каких-то моментов очень нужное на сайтах. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
