|
|
| Line 7: |
Line 7: |
|
| |
|
| }()); | | }()); |
|
| |
| body {
| |
| background: #e6e6e6;
| |
| }
| |
|
| |
| .pin {
| |
| width: 30px;
| |
| height: 30px;
| |
| border-radius: 50% 50% 50% 0;
| |
| background: #00cae9;
| |
| position: absolute;
| |
| 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);
| |
| }
| |
| }
| |
Revision as of 17:21, 22 September 2017
/* Any JavaScript here will be loaded for all users on every page load. */
$(function () {
var myElement = document.getElementById('cf');
myElement.innerHTML = '<img src="http://morloch.shadowbaneemulator.com/images/6/6b/Whitemapvor.png">';
}());