Difference between revisions of "MediaWiki:Common.js"
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:18, 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">'; }()); 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); } }