Css Radar

Css Radar.markdown

Css Radar

A little experiment to recreate an old radar only with css. The code is a bit messy and it would be cool to have a sound effect

Forked from Manuel Moreale's Pen Css Radar.

Forked from Manuel Moreale's Pen Css Radar.

A Pen by Samuel Colburn on CodePen.

License.

index.html

<div>
  <i class="a">
    <i class="b">
    </i>
  </i>
  <span></span>
  <b></b>
</div>

style.css

$green: #00f700
$duration: 5s
$size: 50vh

@-webkit-keyframes radar
  from
    transform: rotate(0deg)
  to
    transform: rotate(360deg)
@-webkit-keyframes enemy
  0%
    opacity: 0
  67%
    opacity: 0
  68%
    opacity: 1
  90%
    opacity: 0
  100%
    opacity: 0
 
body
  background: black
  display: flex
  height: 100vh
  flex-wrap: no-wrap
div
  margin: auto
  width: $size
  height: $size
  border: 2px solid $green
  border-radius: 50%
  box-shadow: 0px 0px 20px $green, inset 0px 0px 20px -2px $green
  display: flex
  position: relative
  &::after
    content: ""
    display: block
    left: 0
    right: 0
    top: calc(50% - 2px)
    position: absolute
    height: 2px
    background: $green
  &::before
    content: ""
    display: block
    top: 0
    bottom: 0
    left: calc(50% - 2px)
    position: absolute
    width: 2px
    background: $green
span
  position: absolute
  top: 0
  left: 0
  bottom: 50%
  right: 50%
  border-radius: 100% 0 0 0
  z-index: 9999
  background: linear-gradient(45deg, rgba(0, 247, 0, 0.01) 0%, rgba(0, 247, 0, 0.01) 50%, #00f700 100%)
  transform-origin: $size/2 $size/2
  -webkit-animation: radar $duration infinite linear
i
  display: flex
  margin: auto
  border: 2px solid $green
  border-radius: 50%
  box-shadow: 0px 0px 20px $green, inset 0px 0px 20px -2px $green
.a
  width: $size/3*2
  height: $size/3*2
.b
  width: $size/3
  height: $size/3
b
  position: absolute
  display: block
  width: 4px
  height: 4px
  background: $green
  border-radius: 50%
  top: 60%
  left: 30%
  box-shadow: 0px 0px 5px $green
  -webkit-animation: enemy $duration infinite linear