A Pen by Jasper Chang on CodePen.
Created
August 20, 2014 09:28
-
-
Save jasperck/a3793c1325af6a4896ea to your computer and use it in GitHub Desktop.
A Pen by Jasper Chang.
This file contains 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
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link href="beforeAfter.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div> | |
| <div id="mainCircle" class="radar"> | |
| <s id="radius"></s> | |
| <b></b> | |
| <b></b> | |
| <b></b> | |
| <b></b> | |
| <b></b> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains 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
| #mainCircle { | |
| position:relative; | |
| z-index: 2; | |
| width:200px; | |
| height:200px; | |
| margin:auto; | |
| border:1px solid #333; /*整圈外圍邊界*/ | |
| border-radius:50%; | |
| background: linear-gradient(135deg, #163F10 0%,#25541F 100%); /*圖底顏色*/ | |
| box-shadow: inset 0px 0px 5px rgba(0,0,0,0.5); | |
| } | |
| #mainCircle:before { | |
| content:""; | |
| position:absolute; | |
| width:100%; | |
| height:100%; | |
| border-radius:50%; | |
| left:0; | |
| top:0; | |
| box-shadow:inset 0 0 10px rgba(255,255,255,.5), inset 0 0 20px rgba(255,255,255,.5), inset 0 0 25px rgba(255,255,255,.5); | |
| } | |
| #radius { | |
| width: 0px; | |
| height: 0px; | |
| position: absolute; | |
| z-index: 4; | |
| opacity: 1; | |
| border-radius: 100%; | |
| border-width: 100px 100px 100px 100px; | |
| border-style: solid; | |
| border-color: | |
| rgba(148, 209, 255, 0.1) | |
| transparent | |
| transparent | |
| transparent; | |
| } | |
| #radius:after { | |
| content: ""; | |
| position: absolute; | |
| bottom: 0px; | |
| left: 0px; | |
| height: 100px; | |
| width: 2px; | |
| background: #94d1ff; | |
| -webkit-transform-origin: bottom center | |
| -webkit-transform: rotate(-45deg); | |
| transform-origin: bottom center; | |
| transform: rotate(-45deg); | |
| } | |
| /* Beep Dot */ | |
| b { | |
| width: 6px; | |
| height: 6px; | |
| position: absolute; | |
| z-index: 4; | |
| background: #008800; | |
| border-radius: 100%; | |
| box-shadow: 0 0 5px rgba(255, 255, 255, 0.7); | |
| opacity: 0; | |
| top: 60%; | |
| left: 30%; | |
| } | |
| b:nth-of-type(1){ | |
| top: 20%; left: 70%; | |
| } | |
| b:nth-of-type(2){ | |
| top: 60%; left: 30%; | |
| } | |
| b:nth-of-type(3){ | |
| top: 80%; left: 70%; | |
| } | |
| b:nth-of-type(4){ | |
| top: 60%; left: 10%; | |
| } | |
| b:nth-of-type(5){ | |
| top: 30%; left: 50%; | |
| } | |
| .radar #radius { | |
| animation: circleround 2s infinite linear; | |
| -webkit-animation: circleround 2s infinite linear; | |
| } | |
| .radar b { | |
| animation: blip 4s infinite linear; | |
| -webkit-animation: blip 4s infinite linear; | |
| } | |
| /*Animation*/ | |
| @-moz-keyframes circleround { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(-360deg); } | |
| } | |
| @-webkit-keyframes circleround { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(-360deg); } | |
| } | |
| @-moz-keyframes blip { | |
| 0% { opacity: 0; } | |
| 1% { opacity: 1; } | |
| 75% { opacity: 0; } | |
| } | |
| @-webkit-keyframes blip { | |
| 0% { opacity: 0; } | |
| 1% { opacity: 1; } | |
| 75% { opacity: 0; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment