|
|
| (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>
';
}());
