Created
February 20, 2021 07:28
-
-
Save jack2jm/5d4b9da09cd6dd8bce78fd551a4751bc to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Dots animation</title> | |
| <style type="text/css"> | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| } | |
| #Docspot2 { | |
| position: fixed; | |
| top: 29%; | |
| left: 20%; | |
| } | |
| .hotspot { | |
| position: relative; | |
| display: inline-block; | |
| border-bottom: 1px dotted black; | |
| } | |
| .pulse { | |
| width: 20px; | |
| height: 20px; | |
| margin-top: -10px; | |
| margin-left: -10px; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| background: #00146B; | |
| border-radius: 50%; | |
| border: 2px solid #00146B; | |
| -webkit-animation: pulsate 0.8s ease-out; | |
| -webkit-animation-iteration-count: infinite; | |
| /* opacity: 0.0; */ | |
| } | |
| .dot { | |
| width: 20px; | |
| height: 20px; | |
| margin-left: -10px; | |
| margin-top: -10px; | |
| border-radius: 50%; | |
| position: absolute; | |
| background: white; | |
| border: 3px solid #00146B; | |
| top: 50%; | |
| left: 50%; | |
| opacity: 0.8; | |
| } | |
| @-webkit-keyframes pulsate { | |
| 0% { | |
| -webkit-transform: scale(1.0, 1.0); | |
| opacity: 0.9; | |
| } | |
| /* 50% {opacity: 0.85;} */ | |
| 100% { | |
| -webkit-transform: scale(2.5, 2.5); | |
| opacity: 0.0; | |
| } | |
| } | |
| .link4 { | |
| position: relative; | |
| right: 0; | |
| left: 10px; | |
| margin: 0 auto; | |
| display: table; | |
| top: 0vh; | |
| } | |
| .animated-circle { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| } | |
| .pulse-circle { | |
| -webkit-animation: pulseline 1s ease-out infinite; | |
| -moz-animation: pulseline 1s ease-out infinite; | |
| animation: pulseline 1s ease-out infinite; | |
| } | |
| .pulse-circle, .pulse-circle2 { | |
| border-radius: 50%; | |
| width: 90px; | |
| height: 90px; | |
| position: absolute; | |
| opacity: 0; | |
| transition: all 3s ease; | |
| } | |
| .pulse-circle2 { | |
| -webkit-animation: pulseline 1s ease-out infinite .5s; | |
| -moz-animation: pulseline 1s ease-out infinite .5s; | |
| -ms-animation: pulseline 1s ease-out infinite .5s; | |
| -o-animation: pulseline 1s ease-out infinite .5s; | |
| animation: pulseline 1s ease-out infinite .5s; | |
| } | |
| @-webkit-keyframes pulseline { | |
| 0% { width:2px;height:2px;opacity:1;left:0;top:0;box-shadow:0 0 0 0px rgba(255,255,255,1); } | |
| 100% { width:40px;height:40px;opacity:0;left:-20px;top:-20px;box-shadow:0 0 0 6px rgba(255,255,255,1); } | |
| } | |
| @-moz-keyframes pulseline { | |
| 0% { width:2px;height:2px;opacity:1;left:0;top:0;box-shadow:0 0 0 0px rgba(255,255,255,1); } | |
| 100% { width:40px;height:40px;opacity:0;left:-20px;top:-20px;box-shadow:0 0 0 6px rgba(255,255,255,1); } | |
| } | |
| @-ms-keyframes pulseline { | |
| 0% { width:2px;height:2px;opacity:1;left:0;top:0;box-shadow:0 0 0 0px rgba(255,255,255,1); } | |
| 100% { width:40px;height:40px;opacity:0;left:-20px;top:-20px;box-shadow:0 0 0 6px rgba(255,255,255,1); } | |
| } | |
| @-o-keyframes pulseline { | |
| 0% { width:2px;height:2px;opacity:1;left:0;top:0;box-shadow:0 0 0 0px rgba(255,255,255,1); } | |
| 100% { width:40px;height:40px;opacity:0;left:-20px;top:-20px;box-shadow:0 0 0 6px rgba(255,255,255,1); } | |
| } | |
| @keyframes pulseline { | |
| 0% { width:2px;height:2px;opacity:1;left:0;top:0;box-shadow:0 0 0 0px rgba(255,255,255,1); } | |
| 100% { width:40px;height:40px;opacity:0;left:-20px;top:-20px;box-shadow:0 0 0 6px rgba(255,255,255,1); } | |
| } | |
| .circle-center { | |
| position: absolute; | |
| left: -7px; | |
| top: -7px; | |
| border-radius: 50%; | |
| width: 30px; | |
| height: 30px; | |
| background: transparent; | |
| } | |
| @media only screen and (max-device-width: 812px) { | |
| .pulse-circle, .pulse-circle2{ | |
| border-radius:50%; | |
| width:40px; | |
| height:40px; | |
| position:absolute; | |
| opacity:0; | |
| transition: all 3s ease; | |
| } | |
| @-webkit-keyframes pulseline { | |
| 0% { width:2px;height:2px;opacity:1;left:0;top:0;box-shadow:0 0 0 0px rgba(255,255,255,1); } | |
| 100% { width:20px;height:20px;opacity:0;left:-10px;top:-10px;box-shadow:0 0 0 6px rgba(255,255,255,1); } | |
| } | |
| @-moz-keyframes pulseline { | |
| 0% { width:2px;height:2px;opacity:1;left:0;top:0;box-shadow:0 0 0 0px rgba(255,255,255,1); } | |
| 100% { width:20px;height:20px;opacity:0;left:-10px;top:-10px;box-shadow:0 0 0 6px rgba(255,255,255,1); } | |
| } | |
| @-ms-keyframes pulseline { | |
| 0% { width:2px;height:2px;opacity:1;left:0;top:0;box-shadow:0 0 0 0px rgba(255,255,255,1); } | |
| 100% { width:20px;height:20px;opacity:0;left:-10px;top:-10px;box-shadow:0 0 0 6px rgba(255,255,255,1); } | |
| } | |
| @-o-keyframes pulseline { | |
| 0% { width:2px;height:2px;opacity:1;left:0;top:0;box-shadow:0 0 0 0px rgba(255,255,255,1); } | |
| 100% { width:20px;height:20px;opacity:0;left:-10px;top:-10px;box-shadow:0 0 0 6px rgba(255,255,255,1); } | |
| } | |
| @keyframes pulseline { | |
| 0% { width:2px;height:2px;opacity:1;left:0;top:0;box-shadow:0 0 0 0px rgba(255,255,255,1); } | |
| 100% { width:20px;height:20px;opacity:0;left:-10px;top:-10px;box-shadow:0 0 0 6px rgba(255,255,255,1); } | |
| } | |
| .circle-center{ | |
| position:absolute; | |
| left:-7px; | |
| top:-7px; | |
| border-radius:50%; | |
| width:15px; | |
| height:15px; | |
| background:transparent; | |
| } | |
| } | |
| body{ | |
| background-image: url('https://agpworldone.com/ICCN/public/assets/front/images/site_images/main_image_841612872287_unnamed.jpg'); | |
| background:#ff000059; | |
| float: left; | |
| width: 100%; | |
| } | |
| .sprite { | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 182px; | |
| height: 101px; | |
| transform: translate(-50%, -50%) scale(.6); | |
| background-image: url('res_928D30ED_9F75_C20D_41D6_F864D5BFE74A_0.png'); | |
| position: absolute; | |
| -webkit-animation: playv 2s steps(6) infinite, playh 0.3334s steps(4) infinite; | |
| animation: playv 2s steps(6) infinite, playh 0.3334s steps(4) infinite; | |
| } | |
| .enter-meeting-sprite { | |
| top: 70% !important; | |
| } | |
| .right-sprite { | |
| right: 10% !important; | |
| left: unset !important; | |
| top: 85% !important; | |
| transform: scale(.6) !important; | |
| } | |
| @-webkit-keyframes playv { | |
| 0%{background-position-y:0} | |
| 100%{background-position-y:-606px} | |
| } | |
| @-webkit-keyframes playh { | |
| 0%{background-position-x:0} | |
| 100%{background-position-x:-728px} | |
| } | |
| @keyframes playv { | |
| 0%{background-position-y:0} | |
| 100%{background-position-y:-606px} | |
| } | |
| @keyframes playh { | |
| 0%{background-position-x:0} | |
| 100%{background-position-x:-728px} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <div class="hotspot" id="Docspot2"> | |
| <div class="pulse"></div> | |
| <div class="dot"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="col-3 text-right" style="margin-top: 20%;"> | |
| <a style="cursor:pointer" class="link4"> | |
| <div class="animated-circle"> | |
| <div class="pulse-circle"></div> | |
| <div class="pulse-circle2"></div> | |
| <div class="circle-center"></div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <a href="#"> | |
| <div class="sprite enter-meeting-sprite" data-value="Enter meeting"></div> | |
| </a> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment