html信号查看,HTML5 雷达扫描和信号追踪定位动画

CSS

语言：

CSSSCSS

确定

body {

overflow: hidden;

background: radial-gradient(#000 16%, transparent 17%), radial-gradient(#444 16%, transparent 17%) 0px 1px, radial-gradient(#000 16%, transparent 17%) 8px 8px, radial-gradient(#444 16%, transparent 17%) 8px 9px;

background-color: #282828;

background-size: 16px 16px;

}

.Map-Grid {

border-radius: 50%;

Position: absolute;

top: 50%;

left: 50%;

width: 250px;

height: 250px;

margin: -125px 0 0 -125px;

background-image: linear-gradient(transparent 49px, rgba(87, 193, 232, .6) 49px, rgba(87, 193, 232, .6) 51px, transparent 51px), linear-gradient(90deg, transparent 49px, rgba(87, 193, 232, .6) 49px, rgba(87, 193, 232, .6) 51px, transparent 51px), linear-gradient(transparent 9px, rgba(87, 193, 232, .3) 9px, rgba(87, 193, 232, .3) 10px, transparent 10px), linear-gradient(90deg, transparent 9px, rgba(87, 193, 232, .3) 9px, rgba(87, 193, 232, .3) 10px, transparent 10px);

background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;

background-position: center center;

-webkit-transition: opacity 3s ease 6s;

-webkit-transform: translate3d(0, 0, 0);

border-radius: 50%;

overflow: hidden;

border: 1px solid #57c1e8;

box-sizing: border-box;

}

.container {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

width: 250px;

height: 250px;

z-index: 10;

border-radius: 50%;

overflow: hidden;

cursor: none;

-webkit-transform: translate3d(0, 0, 0);

}

#followerH {

position: absolute;

width: 300px;

height: 3px;

background-color: #57c1e8;

}

#followerV {

position: absolute;

width: 3px;

height: 300px;

background-color: #57c1e8;

}

#cube {

position: absolute;

height: 50px;

width: 50px;

margin: -25px 0 0 0px;

-webkit-transition: height 1s ease, width 1s ease, margin 1s ease;

}

#cube.animate {

height: 100px;

width: 100px;

margin: -50px 0 0 -25px;

-webkit-transition: height 1s ease, width 1s ease, margin 1s ease;

}

.cubes1,

.cubes2,

.cubes3,

.cubes4 {

position: absolute;

margin: auto;

height: 25px;

width: 25px;

box-sizing: border-box;

}

.cubes1 {

top: 0;

left: 0;

border-top: 5px solid #57c1e8;

border-left: 5px solid #57c1e8;

}

.cubes2 {

top: 0;

right: 0;

border-top: 5px solid #57c1e8;

border-right: 5px solid #57c1e8;

}

.cubes3 {

bottom: 0;

left: 0;

border-bottom: 5px solid #57c1e8;

border-left: 5px solid #57c1e8;

}

.cubes4 {

bottom: 0;

right: 0;

border-bottom: 5px solid #57c1e8;

border-right: 5px solid #57c1e8;

}

.quarter-circle {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

height: 300px;

width: 300px;

-webkit-transform: rotate(45deg);

border-radius: 50%;

overflow: hidden;

-webkit-transition: all 1s ease;

z-index: 10;

}

.quarter-circle.turn {

-webkit-transform: rotate(0deg);

-webkit-transition: all 1s ease;

}

.quarter-circle-1,

.quarter-circle-2,

.quarter-circle-3,

.quarter-circle-4 {

position: absolute;

height: 150px;

width: 150px;

-webkit-transition: all 1s ease;

background-color: black;

border: 1px solid #57c1e8;

box-sizing: border-box;

}

.quarter-circle-1.open,

.quarter-circle-2.open,

.quarter-circle-3.open,

.quarter-circle-4.open {

background-color: #57c1e8;

border: 1px solid rgba(87, 193, 232, 0);

box-sizing: border-box;

}

.quarter-circle-1 {

margin: 0px;

border-radius: 150px 0 0 0;

}

.quarter-circle-1.open {

margin: -90px 0 0 -92.5px;

}

.quarter-circle-2 {

margin: 150px 0 0 150px;

border-radius: 0 0 150px 0;

}

.quarter-circle-2.open {

margin: 245px 0 0 245px;

}

.quarter-circle-3 {

margin: 0 0 0 150px;

border-radius: 0 150px 0 0;

}

.quarter-circle-3.open {

margin: -95px 0 0 245px;

}

.quarter-circle-4 {

margin: 150px 0 0 0;

border-radius: 0 0 0 150px;

}

.quarter-circle-4.open {

margin: 245px 0 0 -95px;

}

.scanner {

position: absolute;

top: 50%;

left: 50%;

width: 300px;

height: 300px;

border-left: 1px solid rgba(87, 193, 232, 0.1);

opacity: 0;

z-index: 110;

background-image: linear-gradient(to top right, #2187e7 0%, rgba(0, 0, 0, 0) 50%);

-webkit-transform-origin: top left;

-webkit-transform: rotate(200deg);

}

.scanner.animate {

-webkit-animation: scanning 6s 1 linear;

}

.circle1,

.circle2,

.circle3 {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

opacity: 0;

border-radius: 50%;

border: 2px solid #57c1e8;

box-sizing: border-box;

}

.circle1 {

height: 50px;

width: 50px;

z-index: 150;

background: black;

}

.circle2 {

height: 125px;

width: 125px;

z-index: 10;

background: transparent;

}

.circle3 {

height: 210px;

width: 210px;

z-index: 10;

background: transparent;

}

.circle1.animate {

-webkit-animation: fadein 1s linear 2s forwards;

}

.circle2.animate {

-webkit-animation: fadein 1s linear 1s forwards;

}

.circle3.animate {

-webkit-animation: fadein 1s linear forwards;

}

@-webkit-keyframes fadein {

to {

opacity: 1;

}

}

.something {

z-index: 50;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

height: 10px;

width: 10px;

background: #2187e7;

border-radius: 50%;

box-shadow: 0 0 10px #2187e7;

opacity: 0;

}

.something.animate {

-webkit-animation: target 6s infinite linear;

}

@-webkit-keyframes scanning {

0% {

-webkit-transform: rotate(200deg);

opacity: 1;

}

100% {

-webkit-transform: rotate(540deg);

opacity: 1;

}

}

@-webkit-keyframes target {

1% {

opacity: 0.5;

-webkit-transform: scale(2.5);

}

3% {

opacity: 1;

-webkit-transform: scale(1.5);

}

60% {

opacity: 0;

-webkit-transform: scale(0.6);

}

}

#map-1 {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

width: 250px;

height: 250px;

border-radius: 50%;

overflow: hidden;

-webkit-transform: translate3d(0, 0, 0) scale(0);

}

#box {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

display: none;

height: 50px;

width: 50px;

z-index: 50;

-webkit-transform: translate3d(0, 0, 0) scale(1);

-webkit-transition: height 1s ease, width 1s ease;

}

#box.animate {

height: 75px;

width: 75px;

margin: auto;

-webkit-transition: height 1s ease, width 1s ease;

}

#map-1.animate {

-webkit-transform: translate3d(0, 0, 0) scale(1);

-webkit-transition: all 2s 3s;

}

img1 {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

border-radius: 50%;

width: 250px;

height: 250px;

-webkit-transform: translate3d(0, 0, 0) scale(0);

}

img1.animate {

-webkit-transform: translate3d(0, 0, 0) scale(1);

-webkit-transition: all 1s 7s;

}

.title {

position: absolute;

top: 80%;

left: 50%;

z-index: 10;

margin: 0 0 0 -5px;

width: 0px;

height: 0px;

border-left: 5px solid #00fffd;

border-right: 5px solid #00fffd;

}

.title.animate {

width: 200px;

height: 50px;

margin: -25px 0 0 -100px;

-webkit-transition: height 1s ease, margin-top 1s ease, width 1s ease 1s, margin-left 1s ease 1s;

}

.title-left,

.title-right {

position: relative;

width: 0px;

height: 40px;

border-top: 5px solid #00fffd;

border-bottom: 5px solid #00fffd;

}

.title-mid {

position: absolute;

left: 50%;

top: 50%;

width: 0px;

height: 0px;

background: rgba(0, 155, 255, .5);

text-align: center;

line-height: 30px;

overflow: hidden;

}

.title-mid.animate {

width: 190px;

height: 30px;

margin: -15px 0 0 -95px;

-webkit-transition: height 1s ease, margin-top 1s ease, width 1s ease 1s, margin-left 1s ease 1s;

-webkit-box-shadow: 0 0 0 1px #00fffd, 0 0 10px 1px teal, inset 0 0 10px 1px teal;

}

.title-left {

float: left;

}

.title-right {

float: right;

}

.title-left.animate {

width: 10px;

-webkit-transition: width 1s ease 1s;

}

.title-right.animate {

width: 10px;

-webkit-transition: width 1s ease 1s;

}

#distance {

float: left;

margin-left: 5px;

width: 118px;

overflow: hidden;

text-align: center;

}

#km {

float: left;

right: 0;

width: 20px;

text-align: left;

}

#mapicon {

float: left;

top: 0;

left: 0;

width: 30px;

height: 30px;

background: url(http://anthony.germishuys.cloudvent.net/pics/mapmarker.png) no-repeat center center;

background-size: cover;

}

.map {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

z-index: 10;

width: 300px;

height: 300px;

border-radius: 50%;

background: black;

overflow: hidden;

}

#map-1,

#map-2 {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

z-index: 15;

width: 250px;

height: 250px;

border-radius: 50%;

}