Главная » Файлы » Прочие скрипты » jQuery |
Анимированная кнопка отправки письма на CSS3 и jQuery для uCoz
30.09.14, 09:47:43 | |
Очень необычная кнопочка отправки писем. Сразу после клика по ней самолётик срывается с места и улетает вдаль Для начала посмотрите ДЕМО Установка: В самый низ вашего css вставляйте: Код .sendme * { -webkit-transition: all 0.15s; -moz-transition: all 0.15s; -o-transition: all 0.15s; -ms-transition: all 0.15s; transition: all 0.15s; outline: none; } button { font-size: 19px; font-family:'Pacifico'; overflow: visible; -webkit-border-radius: 3px; border-radius: 3px; position: relative; padding-right: 30px; background-color: #ecfbff; border: 2px solid #a6e0ee; color: #2d7586; display: block; margin: 13% auto; height: 60px; width: 200px; cursor: pointer; } button:hover { background-color: #ddf7ff; } button:hover svg { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); -webkit-transition: -webkit-transform 0.15s; -moz-transition: -moz-transform 0.15s; -o-transition: -o-transform 0.15s; -ms-transition: -ms-transform 0.15s; transition: transform 0.15s; } button svg { position: absolute; top: 13px; right: 25px; height: 30px; width: auto; -webkit-transition: -webkit-transform 0.15s; -moz-transition: -moz-transform 0.15s; -o-transition: -o-transform 0.15s; -ms-transition: -ms-transform 0.15s; transition: transform 0.15s; } button svg path { fill: #2d7586; } button.clicked { background-color: #cff5b3; border: 2px solid #cff5b3; color: #6aaa3b; padding-right: 6px; -webkit-animation: bounce-in 0.3s; -moz-animation: bounce-in 0.3s; -o-animation: bounce-in 0.3s; -ms-animation: bounce-in 0.3s; animation: bounce-in 0.3s; cursor: default; } button.clicked svg { -webkit-animation: flyaway 1.3s linear; -moz-animation: flyaway 1.3s linear; -o-animation: flyaway 1.3s linear; -ms-animation: flyaway 1.3s linear; animation: flyaway 1.3s linear; top: -80px; right: -1000px; } button.clicked svg path { fill: #6aaa3b; } @-moz-keyframes flyaway { 0% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); top: 13px; right: 25px; height: 30px; } 5% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); top: 13px; right: 0px; height: 30px; } 20% { -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); top: 13px; right: -130px; height: 45px; } 40% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); top: -40px; right: -280px; opacity: 1; -ms-filter: none; filter: none; } 100% { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); top: -200px; right: -1000px; height: 0; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-webkit-keyframes flyaway { 0% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); top: 13px; right: 25px; height: 30px; } 5% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); top: 13px; right: 0px; height: 30px; } 20% { -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); top: 13px; right: -130px; height: 45px; } 40% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); top: -40px; right: -280px; opacity: 1; -ms-filter: none; filter: none; } 100% { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); top: -200px; right: -1000px; height: 0; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-o-keyframes flyaway { 0% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); top: 13px; right: 25px; height: 30px; } 5% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); top: 13px; right: 0px; height: 30px; } 20% { -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); top: 13px; right: -130px; height: 45px; } 40% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); top: -40px; right: -280px; opacity: 1; -ms-filter: none; filter: none; } 100% { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); top: -200px; right: -1000px; height: 0; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @keyframes flyaway { 0% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); top: 13px; right: 25px; height: 30px; } 5% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); top: 13px; right: 0px; height: 30px; } 20% { -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); top: 13px; right: -130px; height: 45px; } 40% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); top: -40px; right: -280px; opacity: 1; -ms-filter: none; filter: none; } 100% { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); top: -200px; right: -1000px; height: 0; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-moz-keyframes bounce-in { 0% { padding-right: 30px; } 40% { padding-right: 6px; } 50% { padding-left: 30px; } 100% { padding-left: 6px; } } @-webkit-keyframes bounce-in { 0% { padding-right: 30px; } 40% { padding-right: 6px; } 50% { padding-left: 30px; } 100% { padding-left: 6px; } } @-o-keyframes bounce-in { 0% { padding-right: 30px; } 40% { padding-right: 6px; } 50% { padding-left: 30px; } 100% { padding-left: 6px; } } @keyframes bounce-in { 0% { padding-right: 30px; } 40% { padding-right: 6px; } 50% { padding-left: 30px; } 100% { padding-left: 6px; } } Следующий код в самый низ страницы перед < /body >: Код <script> $('button').click(function() { $(this).toggleClass('clicked'); $('button p').text(function(i, text) { return text === "Отправлено!" ? "Отправить" : "Отправлено!"; }); }); </script> В то место, где должна быть кнопочка, вставляйте: Код <div class="sendme"> <button> <p>Отправить</p> <svg version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path> </svg> </button> </div> Автор материала, к сожалению, неизвестен Всё. Материал подготовлен Apocalypse | |
Просмотров: 3324 | Загрузок: 0 | Комментарии: 2 | |
Всего комментариев: 2 | |||
| |||