|
|
| (16 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* Any JavaScript here will be loaded for all users on every page load. */
| | $(function () { |
| body {
| |
| background: #e6e6e6;
| |
| }
| |
|
| |
|
| .pin { | | var myElement = document.getElementById('mw-coords-form'); |
| width: 30px;
| | myElement.innerHTML = ' |
| height: 30px;
| | <form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post"> |
| border-radius: 50% 50% 50% 0;
| | Name: <input type="text" name="fname"> |
| background: #00cae9;
| | <input type="submit" value="Submit"> |
| position: absolute;
| | </form> |
| transform: rotate(-45deg);
| | '; |
| left: 50%; | |
| top: 50%;
| |
| margin: -20px 0 0 -20px;
| |
| }
| |
| .pin:after { | |
| content: "";
| |
| width: 14px;
| |
| height: 14px;
| |
| margin: 8px 0 0 8px;
| |
| background: #e6e6e6;
| |
| position: absolute;
| |
| border-radius: 50%;
| |
| }
| |
|
| |
|
| .bounce {
| | }()); |
| animation-name: bounce;
| |
| animation-fill-mode: both;
| |
| animation-duration: 1s;
| |
| }
| |
| | |
| .pulse {
| |
| background: #d6d4d4;
| |
| border-radius: 50%;
| |
| height: 14px;
| |
| width: 14px;
| |
| position: absolute;
| |
| left: 50%;
| |
| top: 50%;
| |
| margin: 11px 0px 0px -12px;
| |
| transform: rotateX(55deg);
| |
| z-index: -2;
| |
| }
| |
| .pulse:after {
| |
| content: "";
| |
| border-radius: 50%;
| |
| height: 40px;
| |
| width: 40px;
| |
| position: absolute;
| |
| margin: -13px 0 0 -13px;
| |
| animation: pulsate 1s ease-out;
| |
| animation-iteration-count: infinite;
| |
| opacity: 0;
| |
| box-shadow: 0 0 1px 2px #00cae9;
| |
| animation-delay: 1.1s;
| |
| }
| |
| | |
| @keyframes pulsate {
| |
| 0% {
| |
| transform: scale(0.1, 0.1);
| |
| opacity: 0;
| |
| }
| |
| | |
| 50% {
| |
| opacity: 1;
| |
| }
| |
| | |
| 100% {
| |
| transform: scale(1.2, 1.2);
| |
| opacity: 0;
| |
| }
| |
| }
| |
| | |
| @keyframes bounce {
| |
| 0% {
| |
| opacity: 0;
| |
| transform: translateY(-2000px) rotate(-45deg);
| |
| }
| |
| | |
| 60% {
| |
| opacity: 1;
| |
| transform: translateY(30px) rotate(-45deg);
| |
| }
| |
| | |
| 80% {
| |
| transform: translateY(-10px) rotate(-45deg);
| |
| }
| |
| | |
| 100% {
| |
| transform: translateY(0) rotate(-45deg);
| |
| }
| |
| }
| |
Latest revision as of 22:58, 6 February 2018
$(function () {
var myElement = document.getElementById('mw-coords-form');
myElement.innerHTML = '
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
';
}());